Swiper 10跑马灯问题：点击后自动播放停止（已设disableOnInteraction:false）

使用Swiper 10实现跑马灯效果时，已配置autoplay.disableOnInteraction: false和allowTouchMove: false，但点击幻灯片（尤其是带链接的幻灯片）后自动播放仍会停止。需要在保留幻灯片链接可点击性的同时，让自动播放持续运行。

核心原因 #

Swiper默认会将点击事件视为用户交互，即使禁用了触摸滑动，点击仍会触发Swiper的交互检测逻辑，进而导致自动播放暂停（部分场景下disableOnInteraction: false无法完全覆盖该逻辑）。

修复方法 #

方法1：配置noSwipingSelector忽略链接元素

在Swiper初始化时添加noSwipingSelector: 'a'，让Swiper不对链接元素进行交互拦截，既保留链接的可点击性，又不会触发Swiper的交互暂停逻辑：

var swiperContainer = document.querySelector('.swiper');
const swiper = new Swiper(swiperContainer, {
    freeMode: true,
    autoHeight: true,
    slidesPerView: 3,
    loop: true,
    loopSlides: 6,
    autoplay: {
        delay: 1,
        disableOnInteraction: false
    },
    speed: 6000,
    allowTouchMove: false,
    // 忽略链接元素的交互检测
    noSwipingSelector: 'a'
});

方法2：阻止点击事件冒泡到Swiper容器

如果方法1不生效，可给幻灯片内的可点击元素添加事件监听，阻止事件冒泡到Swiper容器，避免Swiper捕获到点击交互：

// 初始化Swiper后执行
document.querySelectorAll('.swiper-slide a').forEach(link => {
    link.addEventListener('click', function(e) {
        e.stopPropagation();
    });
});

方法3：强制恢复自动播放（兜底方案）

若以上方法仍有问题，可监听Swiper的click事件，手动重启自动播放：

var swiperContainer = document.querySelector('.swiper');
const swiper = new Swiper(swiperContainer, {
    // 原有配置...
    on: {
        click: function() {
            // 强制重启自动播放
            this.autoplay.start();
        }
    }
});

完整代码示例 #

HTML（保持原有结构）

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="grid-item swiper-slide">
            <a href="https://google.com" target="_blank">
                <img src="https://source.unsplash.com/random">
            </a>
        </div>
        <div class="grid-item swiper-slide">
            <a href="https://google.com" target="_blank">
                <img src="https://source.unsplash.com/random">
            </a>
        </div>
        <div class="grid-item swiper-slide">
            <img src="https://source.unsplash.com/random">
        </div>
        <div class="grid-item swiper-slide">
            <img src="https://source.unsplash.com/random">
        </div>
        <div class="grid-item swiper-slide">
            <img src="https://source.unsplash.com/random">
        </div>
        <div class="grid-item swiper-slide">
            <img src="https://source.unsplash.com/random">
        </div>
        <div class="grid-item swiper-slide">
            <img src="https://source.unsplash.com/random">
        </div>
        <div class="grid-item swiper-slide">
            <img src="https://source.unsplash.com/random">
        </div>
        <div class="grid-item swiper-slide">
            <img src="https://source.unsplash.com/random">
        </div>
    </div>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>

CSS（保持原有样式）

.swiper-wrapper {
  transition-timing-function: linear !important;
  display: flex;
}

.swiper-slide {
  height: 200px;
  width :200px;
  overflow: hidden;
}

img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

JavaScript（使用方法1的配置）

var swiperContainer = document.querySelector('.swiper');
const swiper = new Swiper(swiperContainer, {
    freeMode: true,
    autoHeight: true,
    slidesPerView: 3,
    loop: true,
    loopSlides: 6,
    autoplay: {
        delay: 1,
        disableOnInteraction: false
    },
    speed: 6000,
    allowTouchMove: false,
    noSwipingSelector: 'a'
});

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