Struggling to handle multiple swipers on the page, encountering an issue where the array is always empty in the destroy function for desktop width. The initialization process for mobile devices seems to be working fine. Have tried various methods but end up with an empty array every time.
var init = false;
function swiperManager() {
let mobile = 972;
let allWorks = document.querySelectorAll('.work-item__images');
let swiperArray = [];
const createSlider = (element, id) => {
return new Swiper(element, {
loop: true,
observer: true,
observeParents: true,
slidesPerView: 2.5,
spaceBetween: 16,
});
}
// Enable slider for mobile view
console.log(document.body.getBoundingClientRect().width);
if(document.body.clientWidth <= mobile) {
if (!init) {
init = true;
allWorks.forEach((item, id) => {
const slider = createSlider(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 page load
**************************************************************/
window.addEventListener('load', function() {
swiperManager();
});
/* On resize
**************************************************************/
window.addEventListener('resize', function() {
swiperManager();
});