CODEWITHSUNDEEP
htmlcss
Dancer
Dancer

Reputation: 17671

Centre slider in viewport

I have a site with a central container width of 1000px (centred horizontally) It contains a slider that stretches up to 2000px to fill full screen - each slide contains an image of 2000px, the main text within each image is designed to fit centrally in the 1000px centred site.

My issue is that I need the slider to display centrally regardless of the screen size, but its causing me a headache this morning!

So from my html below I basiclly need the #mySwipe div to be able to stretch to 2000px but always display the containing slides centred - does anyone have any suggestions?

 <body>
    <div class="content">
       <div id="headBlock">
          <div class="navContent">
               <div class="logo"><a href="index.html"></a></div>
               <div class="marketingTxt"></div>
               <div class="clearFix"></div>

                <nav>
                <ul>
                    <li><a href="./" class="sel" title="The liquid homepage" id="homeHL">home</a></li>
                    <li><a href="about-us/" title="About liquid" id="aboutHL">about us</a></li>
                    <li><a href="what-we-do/" title="What liquid do" id="whatHL">what we do</a></li>
                    <li><a href="clients/" title="liquid's clients" id="clientsHL">clients</a></li>
                    <li><a href="news/" title="News and blog post" id="newsHL">news</a></li>
                    <li><a href="contact-us/" title="Contact liquid" id="contactHL">contact</a></li>
                </ul> 
        </nav>
     </div>
</div>
<div class="sliderContainer">
        <div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'>
        <div class='swipe-wrap'>
        <div><img src="images/Bravissimo_Banner_ie.jpg" width="2000" height="390" alt="Bravissimo"> </div>
        <div><img src="images/Keggy_Banner_Ie.jpg" width="2000" height="390" alt="Keglevich">     </div>
       <div> <img src="images/Radley_Banner_ie.jpg" width="2000" height="390" alt="Radley"></div>
       <div> <img src="images/Tiger_Banner_ie.jpg" width="2000" height="390"> </div>
    </div>
 </div>

my css is as follows - 

.content {
    margin-left: auto;
    margin-right: auto;
    max-width: 2000px;
    min-width: 1000px;
    overflow-x: hidden;
}
.sliderContainer {
    background: url("../images/lowbg.png") repeat scroll 0 0 transparent;
    border-bottom: 1px solid #898279;
    box-shadow: 1px 4px 9px -6px inset;
    height: 390px !important;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    top: -8px;
    z-index: 1;
}
#mySwipe {
    max-width: 2000px !important;
    margin: 0 -500px !important;
    min-width: 1000px;
}

Upvotes: 0

Views: 287

Answers (1)

Pete
Pete

Reputation: 58432

I think the only way to achieve what you want through pure css is to use the images as background-images:

Html:

<div id="wrapper">
    <div class="imageHolder" style="background-image:url(http://lorempixel.com/1000/1000/)"></div>
</div>

css

#wrapper {overflow:hidden; min-width:500px; max-width:1000px;} /*widths should change to match your needs*/
#wrapper .imageHolder {background-position:center center; width:100%; height:500px;} /*height should change to match your needs*/

Example

Upvotes: 1

Related Questions