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!
JavaScript

Avatar of undefined
Last Comment
Brad Bansner

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Kyle Hamilton

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Brad Bansner

ASKER
Thanks! This is helpful, I think I can make one of these work.
Your help has saved me hundreds of hours of internet surfing.
fblack61