Tengo un montón de instancias de swiper en la misma página y necesito destruirlas/iniciarlas según el ancho de la pantalla:

 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();

Pero recibo este error cuando cambio el tamaño de las ventanas para destruir los controles deslizantes:

TypeError no detectado: no se pueden leer las propiedades de undefined (leyendo 'niños') en Swiper.loopDestroy (loopDestroy.js:6:1) en Swiper.destroy (core-class.js:545:1) en initGridSlider (slider.js:84) :1) en deslizador.js:90:1