I attempted to customize the bootstrap carousel in order to create a simple content slider. After reviewing two events in the bootstrap documentation and utilizing animate.css for animation, I found that Chrome and Internet Explorer displayed the animations flawlessly. However, in Firefox, the animation only worked on the first instance.
Below is the code snippet I employed to apply the animation:
$('#home-slider').on('slide.bs.carousel', function () {
$('#home-slider .slideInLeftTrigger').removeClass('slideInLeft');
$('#home-slider .fadeInRightBigTrigger').removeClass('fadeInRightBig');
$('#home-slider .slideInLeftTrigger').addClass('slideInLeft');
$('#home-slider .fadeInRightBigTrigger').addClass('fadeInRightBig');
console.log('next');
})
Oddly enough, the console log appears correctly, but the addClass and removeClass functions are not executing as expected.
Is there any way to ensure the animation displays properly across all browsers?
**I am new here, so please forgive me for any errors!