Swiper JS, Swiper .destroy()不工作，我找不到问题

Question

我正在尝试使用Swiper JS，无法找到一种方法来销毁Swiper时需要和使用函数$(window).resize()请告诉我有什么问题。

这是我的代码:

$(document).ready(() => {
initTopInfoContainerSwiper()
}
$(window).resize(() => {
initTopInfoContainerSwiper()
}
let swiperInitParam = true;
let swiperDestroyParam = false;
const initTopInfoContainerSwiper = () => {
const swiper = new Swiper('#js__swipper-top-wrapper-index', {
init: false,
speed: 400,
slidesPerView: 1,
centerInsufficientSlides: true,
spaceBetween: 15,
loop: true,
});
if (window.innerWidth <= 1000) {
if (swiperInitParam) {
swiper.init();
swiperInitParam = false;
swiperDestroyParam = true;
}
} 
else {
if (swiperDestroyParam) {
swiper.destroy()
swiperDestroyParam = false;
swiperInitParam = true;
}
}
}

我尝试了所有这些方法，但都不起作用

if (window.innerWidth <= 1000) {
if (swiperInitParam) {
swiper.init();
swiper.enable();
swiperInitParam = false;
swiperDestroyParam = true;
}
} 
else {
if (swiperDestroyParam) {
swiper.loop = false;
swiper.allowTouchMove = false;
swiper.enable = false;
swiper.enabled = false;
swiper.disable = true;
swiper.disabled = true;
swiper.allowClick = false;
swiper.allowSlidePrev = false;
swiper.allowSlideNext = false;
swiper.allowClick = false;
swiper.initialized = false;
swiper.init()
swiperDestroyParam = false;
swiperInitParam = true;
}
}

请帮

Answer 1

首先，每次调整大小时都调用initTopInfoContainerSwiper()。当你可能只想听一个特定的视口宽度时，这不是一个好的选择。相反，你可以这样做:

const mediaQuery = window.matchMedia(`(min-width: 1000px)`)
mediaQuery.addEventListener('change', () => {
initSwiper()
})

要销毁该程序，只需输入

if (window.innerWidth <= 1000) {
swiper.init();
} 
else {
swiper.destroy(true, true)
}

(查看更多信息)。

我也认为没有必要swiperInitParam和swiperDestroyParam，除非你在其他地方访问它们。