解决Elementor中Swiper实例未定义的问题

// 1. 选取您的滑块容器元素
// 注意：jQuery对象是一个类数组，需要通过索引[0]来获取底层的DOM元素
const mySliderElement = jQuery('#my-slider .swiper-container')[0];

// 2. 检查元素是否存在，避免对null或undefined操作
if (mySliderElement) {
    // 3. 直接使用Swiper构造函数初始化一个新的Swiper实例
    const swiperInstance = new Swiper(mySliderElement, {
        // 在这里可以添加Swiper的各种配置选项
        // 例如：
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });

    console.log("Swiper 实例已成功创建:", swiperInstance);

    // 现在您可以使用 swiperInstance 对象来调用Swiper的方法，例如：
    // swiperInstance.slideNext();
    // swiperInstance.slideTo(2);

} else {
    console.warn("未找到指定的滑块容器元素：#my-slider .swiper-container");
}

const mySliderElement = jQuery('#my-slider .swiper-container')[0];

if (mySliderElement) {
    // 动态加载脚本的辅助函数
    function loadScript(src) {
        return new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.src = src;
            script.onload = resolve; // 脚本加载成功时解决Promise
            script.onerror = reject; // 脚本加载失败时拒绝Promise
            document.head.appendChild(script);
        });
    }

    // 动态加载Swiper库
    // 请将 'path/to/swiper.min.js' 替换为您的Swiper库的实际路径
    loadScript('https://unpkg.com/swiper/swiper-bundle.min.js') // 示例路径，请替换
        .then(() => {
            // Swiper库加载成功后，再初始化Swiper实例
            const swiperInstance = new Swiper(mySliderElement, {
                // Swiper配置选项
                slidesPerView: 1,
                spaceBetween: 30,
                loop: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            });
            console.log("Swiper 实例已通过动态加载创建:", swiperInstance);
        })
        .catch((error) => {
            console.error('加载Swiper库失败:', error);
        });
} else {
    console.warn("未找到指定的滑块容器元素：#my-slider .swiper-container");
}