在Elementor中正确引用和使用Swiper JS实例

// 1. 选中你的滑块容器元素
// 假设你的Elementor滑块容器的ID是 'my-slider'，并且Swiper容器在其中
const mySliderContainer = jQuery('#my-slider .swiper-container');

// 2. 检查是否成功选中了元素
console.log('选中的滑块容器元素:', mySliderContainer);

// 3. 直接使用Swiper构造函数初始化实例
// Swiper构造函数期望一个DOM元素作为参数，jQuery对象是一个类数组对象，
// 所以我们需要通过 [0] 来获取其内部的第一个DOM元素。
const swiperInstance = new Swiper(mySliderContainer[0]);

// 4. 验证Swiper实例是否成功创建
console.log('获取到的Swiper实例:', swiperInstance);

// 现在你可以使用 swiperInstance 来控制滑块了，例如：
// swiperInstance.slideNext();
// swiperInstance.autoplay.stop();

const mySliderContainer = jQuery('#my-slider .swiper-container');
console.log('选中的滑块容器元素:', mySliderContainer);

/**
 * 动态加载JavaScript脚本的辅助函数
 * @param {string} src - 脚本的URL路径
 * @returns {Promise<Event>} 一个Promise，在脚本加载成功时解决，失败时拒绝
 */
function loadScript(src) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = src;
    script.onload = resolve; // 脚本加载成功时调用 resolve
    script.onerror = reject; // 脚本加载失败时调用 reject
    document.head.appendChild(script); // 将脚本添加到文档头部
  });
}

// 动态加载Swiper库
// 请将 'path/to/swiper.min.js' 替换为你的Swiper库的实际路径
// 通常Elementor会自带Swiper，但如果需要特定版本或确认加载，此方法有用。
loadScript('https://unpkg.com/swiper/swiper-bundle.min.js') // 示例路径，请替换为实际路径
  .then(() => {
    // Swiper库加载成功后，再尝试初始化Swiper实例
    const swiperInstance = new Swiper(mySliderContainer[0]);
    console.log('动态加载后获取到的Swiper实例:', swiperInstance);

    // 现在你可以安全地使用 swiperInstance 进行操作
    // swiperInstance.slideTo(2);
  })
  .catch((error) => {
    console.error('加载Swiper库失败:', error);
  });