Forum Discussion
looping slider
I have a object that I took photos of it rotating 360 degrees and set up a slider so it will step through each picture. Is there a way to get the slider when it gets to the end last picture to jump back to the first pic and return the slider back to the first position on the slider.
Here's one way to do it. See tutorial.
- Create a timer that loops
- Adjust slider variable
Tom thanks for the tutorial it gives me a few ideas but what if I want the user to do it manually all the way and when they get to the end of the slider it resets to the beginning. I can figure out how the picture jumps but how do I get the slider object to have the drag button start at the beginning?
You could use a web object HTML page and JavaScript. After seeing product rotation coding by very amateur programmers who use thousands of lines of code, I submit my code to Codepen to save paper.
Note: the image is of a shoe side by side (one very width jpg) rather than individual images. It is in base64 raw image code since CodePen wants money to save images to their server.Michael,
Use a trigger to reset the slider variable.
If they are manually dragging it, I'd let them move it back and forth with no constraints.
- You could add a reset button that would set the variable to 0, which would move it back to the start.
- You can use a toggle to pause/resume timeline which would let the user stop the rotation
See if this will get you started.
Walt, Thanks for this I actually did something like this yesterday to get it to work before you posted it.
Thank you the the community in helping me now I I was able to get the image slider to loop which is great. So now to take this a step further.
I would like to convert this to JavaScript or use GSAP in some way.
I am continuing to evolve this and learn from it. Ultimate goal would be to also replace the slider and use some sort of drag function.
