CSS3 slider - Absolute positioning inside relative div for responsive slideshow

Question

I am modifying some CSS code that I got from http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/. It is a parallax CSS3 slider.

I have tried nearly everything and my issue is that I can not center the sliding div (da.slide) with a fixed max-width in the browser. The max-width is 970px and will scale down when the browser resizes. I have tried using margin: 0 auto and left:50% and it is still now working - it just hangs to the left.

I think the possible issue is the positioning of the slider div. When I change it from absolute to relative it works for the first slide but the remaining slides disappear/slide underneath each other. Any chance of centering the sliding div?

Here is the CSS3 code:

.da-slider{
    width: 100%;
    min-width: 320px;
    height: 300px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    background: transparent url(../images/waves.png);
    background-repeat:repeat-x;
    -webkit-transition: background-position 1s ease-out 0.3s;
    -moz-transition: background-position 1s ease-out 0.3s;
    -o-transition: background-position 1s ease-out 0.3s;
    -ms-transition: background-position 1s ease-out 0.3s;
    transition: background-position 1s ease-out 0.3s;
}

.da-slide{
    position: absolute;
    max-width: 970px;
    width:100%; 
    height: 100%;
    top: 0px;
    left: 0px;  
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    text-align: left;

}
.da-slide-current{
    z-index: 1000;
}
.da-slider-fb .da-slide{
    left: 100%;
}
.da-slider-fb  .da-slide.da-slide-current{
    left: 0px;
}
.da-slide h2,
.da-slide p,
.da-slide .da-link,
.da-slide .da-img{
    position: absolute;
    opacity: 0;
    left: 110%;
}
.da-slider-fb .da-slide h2,
.da-slider-fb .da-slide p,
.da-slider-fb .da-slide .da-link{
    left: 10%;
    opacity: 1;
}

The HTML is:

<div id="da-slider" class="da-slider">
                <div class="da-slide">
                    <h2>Easy management</h2>
                    <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
                    <a href="#" class="da-link">Read more</a>
                    <div class="da-img"><img src="images/2.png" alt="image01" /></div>
                </div>
                <div class="da-slide">
                    <h2>Revolution</h2>
                    <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
                    <a href="#" class="da-link">Read more</a>
                    <div class="da-img"><img src="images/3.png" alt="image01" /></div>
                </div>
                <div class="da-slide">
                    <h2>Warm welcome</h2>
                    <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
                    <a href="#" class="da-link">Read more</a>
                    <div class="da-img"><img src="images/1.png" alt="image01" /></div>
                </div>
                <div class="da-slide">
                    <h2>Quality Control</h2>
                    <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
                    <a href="#" class="da-link">Read more</a>
                    <div class="da-img"><img src="images/4.png" alt="image01" /></div>
                </div>
                <nav class="da-arrows">
                    <span class="da-arrows-prev"></span>
                    <span class="da-arrows-next"></span>
                </nav>
        </div>

Any help will be highly appreciated!

Answer 1

This is a little after the fact, but I had a similar problem as you had, Raja. Specifically, I am using the da-slider (which I got as part of another template), but the images in the slider were not resizing correctly relative to the browser in which they were being viewed. So, larger images that look good on a PC looked pretty massive when viewed on an iPhone for example.

To solve the problem I went through and set the width for images within each da-slide div to have width of 100%. Next, I removed the height attribute from the da-slider class. Finally, I set display:none for da-slide, and display: block for the da-slide-current class. This prevented the parent/container div from having all the images displayed at the same time. The final result is that only the "current" image shows, and the container div expands/contracts relative to the width of the browser window.

Here's what the final da-slider class looked like:

.da-slider{
    width: 100%;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.2), 0px -2px 1px #fff;
    -webkit-transition: background-position 1.4s ease-in-out 0.3s;
    -moz-transition: background-position 1.4s ease-in-out 0.3s;
    -o-transition: background-position 1.4s ease-in-out 0.3s;
    -ms-transition: background-position 1.4s ease-in-out 0.3s;
    transition: background-position 1.4s ease-in-out 0.3s;
}

And the da-slide and da-slide-current classes, respectively:

.da-slide{
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    text-align: left;
    display: none;
}
.da-slide-current{
    z-index: 10;
    display: block;
}

Finally, the da-slide divs look like:

  <div id="da-slider" class="da-slider">
    <div class="da-slide">
      <img src="assets/img/index/panel1.jpg" style="width: 100%;">
    </div> 
    ...

Again, this is well after the fact (your question is more than a year old at this point) but hope that helps you or someone else.

Answer 2

.da-slide{
    position: relative;
    margin: 0 auto;
    max-width: 970px;  
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    text-align: left;

}

This seemed to work for me. Not sure exactly what your trying to do though.

Absolute positioning takes an element out of the page flow. The top, left, right, bottom attributes refer to its positioning in respect to its parent element. By expanding it to 100% width and 100% height, the element will expand to the size of the container it's in, disabling is ability to be centered.

You should give the element a min-width so the browser knows how large to expand/retract the box. The sizing of these should be given flexible measurement such as percentages. Giving it a width 100% means that the element will expand to the size of the container its in. Max and min allow the element to stop expanding at that set size.

Hope that helps, B