How to destroy multiple swipers JS on the page

Question

Trying to destroy several swipers on the page, but somehow the array I get in the destroy part (on the desktop width) is always empty. the initialization on the resize to mobile works fine. tried several ways? but the array always comes empty

   var init = false;
    function swiperMode() {
        let mobile = 972;
        let allWorks = document.querySelectorAll('.work-item__images');
        let swiperArray = [];

        const buildSlider = (element, id) => {
            return new Swiper(element, {
                loop: true,
                observer: true,
                observeParents: true,
                slidesPerView: 2.5,
                spaceBetween: 16,
            });
        }

        // Enable (for mobile)

        
        console.log(document.body.getBoundingClientRect().width);
        if(document.body.clientWidth <= mobile) {
            if (!init) {
                init = true;
                allWorks.forEach((item, id) => {
                    const slider = buildSlider(item, id);
                    swiperArray[id] = slider;
                    console.log(swiperArray);
                })
            }
        }
        console.log(swiperArray);
        if (document.body.clientWidth > mobile) {
            console.log(swiperArray, 2);
            if ( swiperArray.length === 0) return;
            for (let i = 0; i < swiperArray.length; i++) {
                console.log(swiperArray[i]);
                swiperArray[i].destroy(true, true);
            }
            swiperArray = [];            
            init = false;
        } 
        
    }

    /* On Load
    **************************************************************/
    window.addEventListener('load', function() {
        swiperMode();
    });

    /* On Resize
    **************************************************************/
    window.addEventListener('resize', function() {
        swiperMode();
    });

score 0 · Answer 1 · answered Aug 30 '22 at 18:08

The solution was simple

var init = false;
function swiperMode() {
    let mobile = 972;
    let allWorks = document.querySelectorAll('.work-item__images');

    const buildSlider = (element, id) => {
        return new Swiper(element, {
            loop: true,
            observer: true,
            observeParents: true,
            slidesPerView: 2.5,
            spaceBetween: 16,
        });
    }


    if(document.body.clientWidth <= mobile) {
        if (!init) {
            init = true;
            allWorks.forEach((item, id) => {
                const slider = buildSlider(item, id);
            })
        }
    }
    if (document.body.clientWidth > mobile) {
        allWorks.forEach(function(item) {
            if (item.swiper) item.swiper.destroy(true,true);
        })      
        init = false;
    }         
}

/* On Load
**************************************************************/
window.addEventListener('load', function() {
    swiperMode();
});

/* On Resize
**************************************************************/
window.addEventListener('resize', function() {
    swiperMode();
});

How to destroy multiple swipers JS on the page

1 Answers1