Swiper.js断点切换双滑块问题：destroy方法失效求助

你的代码核心问题在于Swiper实例是局部变量，导致外部的destroy方法无法访问到实例；其次断点切换时没有先销毁旧实例就创建新实例，造成多实例冲突，最终导致destroy方法失效。

把mySwiper声明在外部作用域，确保销毁时能获取到实例；每次执行断点检查时先销毁已存在的实例，再创建适配当前屏幕尺寸的新滑块。

修复后的完整代码：

// ***** Swiper@8.4.5 *****
'use strict';

let mySwiper = null; // 将实例变量提升到外部作用域，确保销毁逻辑可访问

document.addEventListener('DOMContentLoaded', function () {
    const mediaQuery = window.matchMedia('(max-width: 768px)');

    const checkBreakpoint = (e) => {
        // 优先销毁已存在的Swiper实例，避免多实例冲突
        if (mySwiper) {
            mySwiper.destroy(false, true); // 销毁实例并清除生成的DOM元素
            mySwiper = null;
        }

        if (e.matches) {
            // 移动端（≤768px）滑块配置
            mySwiper = new Swiper('.swiper-main', {
                init: true,
                loop: true,
                spaceBetween: 20,
                speed: 300,
                thresholdDelta: 100,
                allowTouchMove: true,
                centeredSlides: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                    type: 'bullets'
                },
            });
        } else {
            // 桌面端（>768px）滑块配置
            const thumb = document.querySelectorAll('.thumb-media');

            const switchThumb = (index) => {
                // 增加容错判断，避免首次初始化时找不到active元素报错
                const activeThumb = document.querySelector('.thumb-media-active');
                if (activeThumb) {
                    activeThumb.classList.remove('thumb-media-active');
                }
                thumb[index].classList.add('thumb-media-active');
            };

            mySwiper = new Swiper('.swiper-main', {
                init: true,
                loop: false,
                spaceBetween: 20,
                speed: 800,
                allowTouchMove: false,
                centeredSlides: true,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                on: {
                    afterInit: (swiper) => {
                        thumb[swiper.realIndex].classList.add('thumb-media-active');
                        // 用forEach简化缩略图点击事件绑定
                        thumb.forEach((item, i) => {
                            item.onclick = () => swiper.slideTo(i);
                        });
                    },
                    slideChange: (swiper) => {
                        switchThumb(swiper.realIndex);
                    },
                },
            });
        }
    };

    // 监听屏幕尺寸变化
    mediaQuery.addEventListener("change", checkBreakpoint);
    // 页面加载时执行一次初始化
    checkBreakpoint(mediaQuery);
});

• 实例作用域调整：将mySwiper声明在DOMContentLoaded事件外部，确保销毁逻辑能访问到当前存在的实例。
• 强制销毁旧实例：每次进入断点检查逻辑时，先判断是否存在实例，存在则立即销毁，彻底避免多实例共存导致的功能冲突。
• 容错处理：在切换缩略图激活状态的逻辑中，增加对thumb-media-active元素的存在性检查，防止首次初始化时因找不到元素报错。
• 代码优化：用forEach替代for循环绑定缩略图点击事件，代码更简洁易维护。

内容的提问来源于stack exchange，提问作者上西潤