so, i have web html just two column ( column left for menu, column right for slide). when column menu be smaller ( width ), so automatically column slider be enlargedâŚ
not messy = dirty, i mean when column slider be enlarged and the shift of slide2, slide3 shown partially. because data-pos="-960px" canât be changed to -1130px for slide2. so slide3 shown partially
I just have one question. When youâre viewing the last image of the sequence, and then you click to the first one, instead of âwrapping aroundâ and smoothly transitioning to it, instead you skim back past all the other images.
How can I make it so that the transition from last image to first doesnât pass by the other images? Iâd really appreciate any tips. Thank you so much.
Would you like the reset to just go to the second image naturally without revisiting old images? If so, one way you can do that is by having the first image duplicated after the last one. When you reset, you go to the ânextâ copy of the first image. Behind the scenes, once that happens, you secretly jump from the copy of the first image to the actual first image itself. That can give you the effect you are looking for.
I am just thinking out loud here, so I am hoping others have some better suggestions. I will fiddle with trying to create this sometime this week if I have some time!
What I mean is that when moving from Image4 â Image1, I would like it to be a direct transition, rather than going Image4 [ â Image3 â Image2] â Image1.
Hopefully this makes sense - I think weâre on the same page.
Thatâs a good idea, of a doubled first image that âredirectsâ to the actual first image. I donât totally understand how it would work, but I could probably play around and figure it out.
Yet, it seems that there must be a cleaner way to achieve this. Hmmm. Let me know if you come up with anything! Thanks again
Ray! There is, but it will require modifying the code a bit to do that. At a high-level, one way to do that would be to store the duration a custom property (or even data- attribute in the HTML) for each element. Once you have that, you can read that duration value and use it on a setTimeout/setInterval call.
I donât have the time right now to do that, but Iâll look into it by end of the week (unless somebody beats me to it)
Iâm trying to get it to work for multiple sliders on one page, but am having a lot of difficulty making it work. I have three sliders, so I made three copies of the script, and named the variables, data-pos, and ids different for each one, corresponding to the three different sliders, and still canât get it to work.