How to Animate Slider Loop?
How to Animate Slider Loop without touching the swiper buttons?
3 Replies
This is a very vague question. You should have a look at this post first and come back with a code example of where you're at. For all we know, this could be built using HTML tables.
https://discord.com/channels/436251713830125568/1022288836715356180/1022288836715356180
Put 3 pictures or cards in a div with overflow: hidden. transform: translate () 2 of the pictures so they are outside the edges of the div, one on each side. In js write a function that applies a class, make css to animate a transition when that class is added, moving the central picture out while moving another into view, then update the content of the hidden pictures, so the next in the series is hidden and ready to slide in. Use a setInterval() function to automatically do the slide on an interval, reset the interval when a swiper button is pressed.
You could also find a ui component library that has an animated gallery.
Thank you. i already knew it is against the WCAG so i chose to keep it as it is i hope this helps too.