sliding images from right to left, reordering left-most image to the right to re-sort, creating an endless loop

Brad Bansner
Brad Bansner used Ask the Experts™
I'm not looking for a code solution for this one, just an overall concept that I can apply to custom develop my own slide show. Something similar to this website:

I'm trying to figure out the best way to do this. Normally, I would have a DIV with overflow:hidden as the container. Then I might have a series of float:left DIVs within the container (all sized to the same width and height as the container) that have various content in them. Then, on some interval, I would simply slide the whole thing to the left, the same number of pixels as the width of the DIVs.

The problem is, once I run out of slides, there is nothing left to slide into the frame. I guess what I would want, conceptually, is to take the left-most DIV (after it has slid off to the left and is no longer visible) and somehow move it all the way to the right (at the end of the list of DIVs). Then I could endlessly slide the whole thing to the left and never run out of frames, it would just repeat.

I have seen other websites do something along the lines of: after it gets to the end of the list of slides, do a quick "reset" and animate everything all the way to the right again. But then, that transition isn't the same as the others, we want something seamless.

I thought about taking the left-most frame and creating a new element (on the right of the list of DIVs). But if the slide show runs for a considerable period of time, isn't that going to overload the browser with continuously growing content? That doesn't seem like the most elegant way to handle this.

Another thought, and not sure if this would work. If I have 7 slides, create an 8th slide that is a duplicate of slide #1. When it gets to slide 8, have it "flip" immediately over to slide 1 (instant reposition without any transition effect), then continue sliding to the left as usual, making it seem like an endless loop.

Anyway, would appreciate any suggestions on how to go about tackling this project.

Thank you!
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Data Scientist
Most Valuable Expert 2014
Here's 2 ideas:

onload slide-1 is visible. All other slides are stacked on top of each other to the right and hidden. As slide-1 slides out to the left, slide-2 slides in from the right. On complete, set position of slide-1 to the right behind the scenes so to speak. Now slide-2 is visible, and all other slides including slide-1 are sitting on top of each other on the right. Loop through all slides, and slide in slide-1 when you run out of slides.

Here is a loop that fades, but can easily be adapted to slide.
var scroller = $('.scrImgs');
    $(".scrImgs div").css({
        "opacity": 0
    $(".scrImgs .scrImg1").css({
        "opacity": 1
    var numSlides = scroller.children("div").length; // so you can have as many images as you want in each product
    var i = 1;
        }, {
            queue: false
            opacity: 1
        }, 1000);
        if( i > numSlides){
            i = 1;
            }, {
                queue: false
    } , 5000);

Open in new window

Another approach might be to put the slides in an array which you push and pop, and always place the first item in the array to position 0,0, and offset the left position of the rest of the items by the width of the slideshow. As you slide, pop the first slide from the array, then push it to the array, which will insert it at the end. (I like this idea - gonna try it out meself :))
Brad BansnerWeb Developer


Thanks! This is helpful, I think I can make one of these work.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial