0

I want to add "active-image" class to images inside Active class. The "active-image" class should be removed from the images inside all slides whose class is not active.

I have an animation. When I add your "active-image" class to the images, it becomes active. Animation should be played once for each slider transition. So I want to remove "active-image" class from all images and add it when active.

DEMO: https://sametselki.com.tr/projects/animations/

< ========== HTML ========== >

        <div class="swiper">
                    <div class="swiper-wrapper">
                        <!-- Slide 1 -->
                        <div class="swiper-slide">
                            <img src="img/1.png" alt="">
                            <img src="img/2.png" alt="">
                            <img src="img/3.png" alt="">
                            <img src="img/4.png" alt="">
                        </div>
                        <!-- Slide 1 -->
        
                        <!-- Slide 2 -->
                        <div class="swiper-slide">
                            <img src="img/1.png" alt="">
                            <img src="img/2.png" alt="">
                            <img src="img/3.png" alt="">
                            <img src="img/4.png" alt="">
                        </div>
                        <!-- Slide 2 -->
                    </div>
        
                    <div class="swiper-pagination"></div>
        
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
        
        </div>
    
    < ========== HTML ========== >

    < ========== JS ========== >
    
        var items = document.querySelectorAll(".swiper-slide");
        var images = document.querySelectorAll(".swiper-slide.swiper-slide-active img");
    
    
    
    items.forEach(element => {
    
        if (element.classList.contains("swiper-slide-active")) {
            images.forEach(image => {
                image.classList.add("active-image");
            });
        }
    });
    
    
    
    swiper.on('slideChange', function (e) {
        items.forEach(element => {
    
            if (element.classList.contains("swiper-slide-active")) {
                images.forEach(image => {
                    image.classList.add("active-image");
                });
            }
            else {
                images.forEach(image => {
                    image.classList.remove("active-image");
                });
            }
            
        });
    });

  < ========== JS ========== >
Samet
  • 1
  • 1

1 Answers1

0

You should set every time var images = document.querySelectorAll(".swiper-slide.swiper-slide-active img"); in your slideChange's callback or they will be always the same. You should also use slideChangeTransitionEnd instead of slideChange.

swiper.on('slideChangeTransitionEnd', function (e) {
       var images = document.querySelectorAll(".swiper-slide.swiper-slide-active img")
        items.forEach(element => {
    
            if (element.classList.contains("swiper-slide-active")) {
                images.forEach(image => {
                    image.classList.add("active-image");
                });
            }
            else {
                images.forEach(image => {
                    image.classList.remove("active-image");
                });
            }
            
        });
    });

BTW try this other code....

swiper.on('slideChangeTransitionEnd', function (e) {
       var images = document.querySelectorAll(".swiper-slide img");
       var images_to_active = document.querySelectorAll(".swiper-slide.swiper-slide-active img");

        images.forEach(image => {
            image.classList.remove("active-image");
        });
       
        images_to_active.forEach(image => {
            image.classList.add("active-image");
        });
    });
Gicu Aftene
  • 502
  • 2
  • 9