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');
}
}
});
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');
})