Splide js text animation between slides with animate css classes

0 votes

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.

Jun 9 in CSS by Edureka
• 10,120 points
176 views

1 answer to this question.

0 votes

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');  
});
answered Jun 10 by Edureka
• 9,540 points

Related Questions In CSS

0 votes
0 answers

How to position text over an image with CSS

How can I use CSS to center ...READ MORE

Jul 11 in CSS by Edureka
• 10,120 points
14 views
0 votes
0 answers

Is it possible with CSS to make text's color fade between two colors?

In the following design, I want to ...READ MORE

Aug 5 in CSS by Edureka
• 10,120 points
7 views
0 votes
0 answers
0 votes
1 answer

Is there any way to colorize a white PNG image with CSS only?

Filters can be used with -webkit-filter and ...READ MORE

answered May 27 in CSS by Edureka
• 9,540 points
82 views
0 votes
1 answer
0 votes
0 answers

Anyone can help me out to understand the semantic of (document.getElementBYId("demo").innerHTML="Hello") ?

Hello guys, Can Someone helps me to find ...READ MORE

Jan 17, 2020 in Web Development by anonymous
• 37,500 points
408 views
+1 vote
1 answer

What is the relationship between angularjs Scope with controller/view?

Let us consider the below block: <div ng-controller="emp"> ...READ MORE

answered Jan 20, 2020 in Web Development by Niroj
• 82,740 points

edited Jan 21, 2020 by Niroj 408 views
+1 vote
1 answer

What are pseudo class in css??

Hey, The state of an element is controlled  by ...READ MORE

answered Jan 20, 2020 in Web Development by Niroj
• 82,740 points

edited Jan 21, 2020 by Niroj 302 views
0 votes
1 answer

Is there any way to animate an ellipsis with CSS animations?

You might try to time each ellipsis ...READ MORE

answered May 27 in CSS by Edureka
• 9,540 points
67 views
0 votes
1 answer

Making text in one column italics with CSS

What you can do is using the td:nth-child() to ...READ MORE

answered Jun 17 in CSS by Edureka
• 9,540 points
8 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP