Show/hide element in swiper-CodePudding

I have a question regarding Swiper. I want to show or hide description element if slide is active or not. I found slideChangeTransitionStart event but I don't now how to add appear class to description element. Any help?

<div class="swiper mySwiper">
 <div class="swiper-slide">
  <div class="swiper-img">
   <div class="stripes-img"></div>
   <div class="img img-1"></div>
  </div>
  <div class="swiper-desc slide-down">
   <p>desription</p>
  </div>
 </div>
</div>

.slide-down {
 transform: translateY(-50%);
 transition: opacity 1000ms ease-in, transform 600ms ease-in;
 opacity: 0;
}
.slide-down.appear {
 transform: translateY(0);
 opacity: 1;
}

const swiper = new Swiper(".mySwiper", {
 //other parameters
 on: {
    slideChangeTransitionStart: function () {
        const downSliders = document.querySelectorAll(".slide-down");  
        downSliders.classList.add('appear');
    }
 }
});

CodePudding user response：

document.querySelectorAll() returns a list of Nodes. So you will have to use for each loop to add 'appear' class to each Node in the list. For eg.

const downSliders = document.querySelectorAll(".slide-down"); 
downSliders.forEach(function(item) {
    item.classList.add('appear');
})