fmz 14

I am working on a jQuery-based slideshow for a site and have encountered a bit of a bump in the road.

I did this first using jQuery Cycle plugin but found that after the second image loaded the images slipped enough to be out of alignment.

So I am using an alternative method but now have a new problem. In order to get the images to stack properly and show properly they have to be positioned using absolute positioning. This works great for the slideshow but is problematic when you expand the page.

Relative positioning works best but then it exposes the other images.

Here is the jQuery:

        setInterval("rotateImages()", 4000 );

    function rotateImages() {
        var oCurPhoto = $("#slideshow div.current");
        var oNxtPhoto =;
        if (oNxtPhoto.length == 0)
            oNxtPhoto = $("#slideshow div:first");

        oNxtPhoto.css({ opacity: 0.0 }).addClass('current').animate({    opacity: 1.0 }, 2000, 
            function() {

and the css:

#slideshow              { width: 424px; height: 294px; }
#slideshow div          { position: absolute; top: 254px; left: 151px; z-  index: 0;}
#slideshow div.previous { z-index: 1; }
#slideshow div.current  { z-index: 2; }

Would appreciate some insights for getting this to show correctly.


3 answers

This was chosen as the best answer

As Dan says, position:absolute takes its reference from the nearest positioned parent element in the tree.

in the absence of any parent elements with position set, it uses the body/viewport as you found to your cost.

when setting position:absolute, position an appropriate parent container with position:relative and set co-ordinates based on the parents position in the document flow.

Answered over 9 years ago by Tony Crockford
  • Tony. Well it was time to get my head around this concept and your answer was the impetus. I had never fully understood this until now. Thanks. fmz over 9 years ago
  • is my quickly adjusted version Tony Crockford over 9 years ago
danwellman 5600

Try adding position:relative to the #slideshow selector and then changing the positions in the #slideshow div selector to top:2px; left:37px;

Answered over 9 years ago by danwellman
fmz 14

Hi Dan,

Please refresh the page and see what happens. I had tried this before and it exposes the underlying images.

Answered over 9 years ago by fmz
  • Hi, I refreshed the page, some of the other elements are out of alignment now but I'm not seeing underlying images being exposed. What browser are you testing in? Generally when making image slideshows I find it easiest to have an outer container with overflow:hidden which is the width of a single image in the slide show, then have an inner container which is as wide as the sum of the widths of the images in the slideshow. If you then float the images in the inner container they will stack up horizontally and you can use jQuery to simply slide the inner container along by the width of a single image using negative left-margin. This generally works quite well and doesn't lead to unusual layout issues :) danwellman over 9 years ago