After hours of research, I have hit a roadblock with my custom slider project. I am reaching out to fellow developers for help and hoping that my experience can benefit others facing a similar challenge.
The goal is to create a custom slider with animated DOM elements and unique animations within each slide. The loop will transition from one slide to the next until it reaches the final slide, which will include a replay button to start the loop again upon clicking.
I am aiming to build a slider animation loop similar to the one found at: https://stripe.com/checkout
Elements in the animation will be dependent on the following slides, for example, an element may need to complete an effect before transitioning to the next slide.
At this stage, my focus is on initializing and playing through the loop to the end.
I have a basic structure set up for my slides and some JavaScript code ideas to initiate the loop, but I am struggling to make it move smoothly between slides while controlling specific elements using the CSS classes I have applied.
I have included the CSS for reference and clarity:
Html
<!-- Your HTML Code Here -->
CSS
/* Your CSS Code Here */
application.js
// Your JavaScript Code Here