Link to home
Start Free TrialLog in
Avatar of Brad Bansner
Brad Bansner

asked on

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

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:

http://tomdolanswimschool.com

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!
ASKER CERTIFIED SOLUTION
Avatar of Kyle Hamilton
Kyle Hamilton
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Brad Bansner
Brad Bansner

ASKER

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