Magento2中Tab切换后仅首个Carousel可滑动的JS问题求解

当前代码的核心问题 #

1. NodeList绑定事件错误：querySelectorAll返回的是元素集合，不能直接调用addEventListener，必须遍历单个元素操作。
2. 重复加载脚本：每次点击Tab都注入Glider脚本，会导致脚本重复加载，引发逻辑冲突。
3. 未精准定位激活轮播：初始化所有轮播而非当前激活Tab对应的轮播，且隐藏轮播初始化时宽度计算错误，导致无法滑动。

修复步骤及代码 #

1. 修改AlpineJS的Tab点击事件，传递当前Tab标识

在$dispatch时带上当前Tab的名称，让事件监听能精准找到对应轮播：

<span :class="{ 'text-price': tab === 'top-seller' }" @click="tab = 'top-seller', $dispatch('reloadActiveCarousel', { tab: 'top-seller' })" class="cursor-pointer tab-title mx-4 font-medium">Top seller</span>
<span :class="{ 'text-price': tab === 'audio' }" @click="tab = 'audio', $dispatch('reloadActiveCarousel', { tab: 'audio' })" class="cursor-pointer tab-title mx-4 font-medium">Audio</span>
<span :class="{ 'text-price': tab === 'luci' }" @click="tab = 'luci', $dispatch('reloadActiveCarousel', { tab: 'luci' })" class="cursor-pointer tab-title mx-4 font-medium">Luci</span>
<span :class="{ 'text-price': tab === 'effetti' }" @click="tab = 'effetti', $dispatch('reloadActiveCarousel', { tab: 'effetti' })" class="cursor-pointer tab-title mx-4 font-medium">Effetti</span>
<span :class="{ 'text-price': tab === 'video' }" @click="tab = 'video', $dispatch('reloadActiveCarousel', { tab: 'video' })" class="cursor-pointer tab-title mx-4 font-medium">Video</span>

2. 修正事件监听逻辑，精准初始化激活轮播

确保脚本只加载一次，且仅初始化当前显示的轮播，同时处理隐藏元素的宽度问题：

// 标记Glider脚本是否已加载，避免重复注入
let gliderLoaded = false;

window.addEventListener('reloadActiveCarousel', (event) => {
    const currentTab = event.detail.tab;
    // 找到当前Tab对应的轮播容器（需确保轮播容器有data-tab属性匹配Tab名称）
    const activeCarousel = document.querySelector(`[data-tab="${currentTab}"]`);
    
    if (!activeCarousel) return;

    if (!gliderLoaded) {
        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = '<?= $escaper->escapeJs($escaper->escapeUrl($gliderUrl)) ?>';
        script.onload = () => {
            gliderLoaded = true;
            initSingleCarousel(activeCarousel);
        };
        document.head.appendChild(script);
    } else {
        // 若已加载脚本，先销毁原有实例再重新初始化，避免冲突
        if (activeCarousel._glider) {
            activeCarousel._glider.destroy();
        }
        initSingleCarousel(activeCarousel);
    }
});

// 单独初始化单个轮播的函数，处理隐藏元素的宽度计算问题
function initSingleCarousel(carousel) {
    // 先显示轮播容器，否则宽度为0导致Glider无法计算参数
    carousel.style.display = 'block';
    // 强制触发DOM重绘，确保宽度计算准确
    void carousel.offsetWidth;

    // 初始化Glider，替换为你的实际配置
    new Glider(carousel, {
        slidesToShow: 3,
        slidesToScroll: 1,
        draggable: true,
        arrows: {
            prev: carousel.querySelector('.glider-prev'),
            next: carousel.querySelector('.glider-next')
        }
    });
}

3. 给轮播容器添加匹配的data-tab属性

确保每个轮播容器的data-tab属性和对应Tab的名称一致：

<!-- Top seller轮播 -->
<div data-tab="top-seller" data-content-type="products" data-appearance="carousel" class="carousel-container">
    <!-- 轮播内容 -->
</div>

<!-- Audio轮播 -->
<div data-tab="audio" data-content-type="products" data-appearance="carousel" class="carousel-container hidden">
    <!-- 轮播内容 -->
</div>

关键修复点说明 #

• 避免重复加载脚本：用gliderLoaded标记脚本状态，只注入一次。
• 精准定位激活轮播：通过data-tab匹配当前Tab，只初始化需要显示的轮播。
• 解决隐藏元素宽度问题：初始化前强制显示轮播并触发重绘，让Glider能正确计算滑动所需的宽度参数。
• 销毁旧实例：重新初始化前销毁已有Glider实例，防止重复绑定事件导致的异常。

内容的提问来源于stack exchange，提问作者D.D.