How to add and remove classes to the active slide child 'div' on react slick carousel

Question

If you are on the active slide i want to add a className content_animation to the className="content_text" .

And if the slide changes whether you click/swipe the arrows or dots, the active slide will always do the same which is to add a className content_animation to the className="content_text" .

Im tyring to achieve it using beforeChange and/or afterChange .

Here is the react slick docs

Below is my code and also here is the complete sandbox code https://codesandbox.io/ .

 import React, { Component } from "react"; import Slider from "react-slick"; export default class SlideChangeHooks extends Component { render() { const settings = { dots: true, infinite: true, speed: 1000, slidesToShow: 1, slidesToScroll: 1, beforeChange: (oldIndex, newIndex) => { setTimeout(() => { const sample = document.querySelector(".content_text"); sample.classList.remove("content_animation"); console.log("beforeChange", oldIndex, newIndex); }); }, afterChange: (index) => { setTimeout(() => { const sample = document.querySelector(".content_text"); sample.classList.add("content_animation"); console.log("afterChange", index); }); } }; return ( <div className="slide-parent"> <Slider {...settings}> <div className="slide-item"> <h3>1</h3> <div className="content_text">Lorem Ipsum</div> </div> <div className="slide-item"> <h3>2</h3> <div className="content_text">Lorem Ipsum 2</div> </div> <div className="slide-item"> <h3>3</h3> <div className="content_text">Lorem Ipsum 3</div> </div> </Slider> </div> ); } }

Answer 1

 const sample = document.querySelector(".content_text");

Because you use document.querySelector you take only one element, always the first, and a class never will be removed from other slides. You should use document.querySelectorAll to get all slides to remove the class from all slides.

 const sample = document.querySelector(".content_text");

Inside afterChange you should select only active slide and assign a class to it. Slick active slide has a class .slick-active

 beforeChange: (oldIndex, newIndex) => {
    setTimeout(() => {
      const sample = document.querySelectorAll(".content_text");

      for (let i = 0; i < sample.length; i++) {
        sample[i].classList.remove("content_animation");
        console.log("beforeChange", oldIndex, newIndex);
      }
      
    });
  },
  afterChange: (index) => {
    setTimeout(() => {
      const sample = document.querySelector(".slick-active .content_text");
      sample.classList.add("content_animation");
      console.log("afterChange", index);
    });
  }

Answer 2

I got it check my updated code on sandbox link here hopefully work on all browsers.

So for now i just removed the beforeChange and afterChange. By default the opacity of the text is 0 and then I update the opacity effects of the text from CSS targeting the slick-active or slick-current classes.

Still open for any workaround or possible solutions.