• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

421
Views
swiper.destroy() is not working when have multiples sliders on a page

I have a bunch os swiper instances in the same page and need to destroy/init them based on screen width:

const mobile = window.matchMedia('(max-width: 575.98px)');

function instantiateGridSlider() {
const sliders = [];
$('.thumbnails-grid').each(function(index, element){
    const instance = $(this).data('instance');
    sliders[index] = new Swiper(element, {
    speed: 500,
    spaceBetween: 30,
    slidesPerView: 1,
    loop: true,
    init: false,
    pagination: {
        el: '.swiper-pagination-' + instance,
        type: 'bullets',
        clickable: true,
    },
    });
});

return sliders;
}

function initGridSlider() {
if ($('.thumbnails-grid').length == 0) {
    return;
}

const gridSliders = instantiateGridSlider();
for (let i = 0; i < gridSliders.length; i++) {
    if (mobile.matches) {
    gridSliders[i].init(gridSliders[i].el);
    } else {
    gridSliders[i].destroy(true, true);
    }
}
}

window.addEventListener('resize', function() {
initGridSlider();
});

initGridSlider();

But I'm getting this error when resize the windows to destroy the sliders:

Uncaught TypeError: Cannot read properties of undefined (reading 'children') at Swiper.loopDestroy (loopDestroy.js:6:1) at Swiper.destroy (core-class.js:545:1) at initGridSlider (slider.js:84:1) at slider.js:90:1

about 3 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error