Splide js text animation between slides with animate css classes

Question

I use splide.js carousel and i want to animate text caption between slides using animate.css.

This is the code i use:

document.addEventListener( 'DOMContentLoaded', function () {

  var splide = new Splide( '.slider', {
    type: 'fade',
    perPage: 1,
    autoplay: true,
    focus: 'center',
    trimSpace: false,
    rewind: true,

  } ).mount();

  splide.on( 'active', function() { 
    const element = document.querySelector('.title');
    element.classList.add('animate__animated', 'animate__fadeInRight');
    } );

  splide.on( 'inactive', function() {   
    const element = document.querySelector('.title');
    element.classList.remove('animate__animated', 'animate__fadeInRight');  
    } );

});

The first slide gets the attention of the class, while the others do not. I'm guessing I'm utilising events incorrectly, but I'm not sure where the problem lies.

Answer 1

The event callback functions contain an event object containing the slide index that triggered the event (such as becoming active or inactive). Ye , the active event is fired whenever a slide changes, but consider what element you're querying. Regardless of what is active, you grab the first element with the class 'title.' The following should do the trick.

splide.on( 'active', function(e) {  
    const element = document.querySelectorAll('.title');
    element[e.index].classList.add('animate__animated', 'animate__fadeInRight');
});

splide.on( 'inactive', function(e) {    
    const element = document.querySelectorAll('.title');
    element[e.index].classList.remove('animate__animated', 'animate__fadeInRight');  
});