I am looking to create a simple slider from scratch. The sliding functionality is working perfectly in an infinite loop, but I want to add the option for users to skip to specific slides (e.g. using arrows).
@keyframes slider-ani {
0% { left: 33.3%; }
20% { left: 33.3%; }
25% { left: 0%; }
45% { left: 0%; }
50% { left: -33.3%; }
70% { left: -33.3%; }
100% { left: 33.3%; }
}
Is there a way to use a JavaScript command to control the animation progress, for example, jumping from 25% to 45%?
I am aiming to utilize CSS3 as much as possible, although I understand that achieving this functionality is straightforward with jQuery.