Add class only on first slide the first time the page loads

Question

I have implemented a slideshow using Bootstrap Carousel. As you guys might now, this carousel is pretty basic so I wanted to add some eye candy to it.

Using the animate.css transitions, I wanted to only animate the first slide. I tried

$('.caption-wrapper').addClass('scrollpoint sp-effect3');

setTimeout(function () { 

$('.caption-wrapper').removeClass('scrollpoint sp-effect3 animated fadeInDown');

}, 2000);

and it works! However, as you can see, I am adding and removing a class using the setTimeout function (which is kind of weird).

Is there a cleaner way to do this?

Answer 1

So basically, as mentioned by @isherwoord, I used Bootstrap carousel available events, in this case the "slide" event. Here's the answer:

$('#slideshow').on('slide.bs.carousel', function () {

  $('.caption-wrapper').removeClass('scrollpoint sp-effect3 animated fadeInDown');

});

This a lot more elegant solution to what I originally had.

Answer 2

Are you looking for something like this:

$(document).ready(function() {
  function slider(){
       $('.caption-wrapper').addClass('scrollpoint sp-effect3',function(){
       setTimeout(function () { 
           $('.caption-wrapper').removeClass('scrollpoint sp-effect3 animated fadeInDown');
           }, 2000);
       });
   }
  setInterval(slider,3000);
});