troubleshooting Question

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

Avatar of Brad Bansner
Brad Bansner asked on
JavaScript
2 Comments1 Solution313 ViewsLast Modified:
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
Join our community to see this answer!
Unlock 1 Answer and 2 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros