So, I have a rather simple slider that is created using only CSS. Each slide has unique labels for navigation buttons. The main question here is: how can I dynamically add or remove classes to specific items on the slide only when that particular slide is navigated to?
Sliders often tend to load everything upfront, which defeats the purpose if you want to incorporate cool animations to certain elements within each slide after they are displayed.
Check out this jsfiddle link for a preview of what I'm working on
I've included a mock-up of the slider in the jsfiddle link provided above. The classes "animated" and "fadeInUpBig" represent the animations that I would like to toggle on and off when navigating between slides. These will be assigned to different elements within each slide for added visual effects...
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.fadeInUpBig {
-webkit-animation-name: fadeInUpBig;
animation-name: fadeInUpBig;
opacity: 0.3;
background-color: rgba(0,0,0,0.3);
}