swiper分页器数量与轮播图数量不对应，轮播有次抽搐，鼠标移入不暂停

首次 更新 使用swiper出现的bug 评论

简介

这几天遇到了swiper轮播组件自动轮播到某些图片时，就会抽搐（一窜就过去了），也就是延迟时间没有生效。

然后今天突然发现分页器的数量和轮播图片的数量不对应。（因为网页是响应式的，在pc端的分页器部分被遮挡了）

还有就是鼠标移入进去后不暂停自动轮播，后面设置了好像也无效（有点忘记了）。

然后就弄了很久，之前以为是因为版本问题，然后就把最初的swiper@6.8.4换成了swiper@5.4.5，网上说这个版本的兼容

最好，具体我也不知道，哈哈哈~~~

然后还是有问题，之后我就把官方的代码弄过来了，也不行，嗯…就很离谱。

后面我就突然发现，可能是我的swiper轮播组件太多了，造成了冲突。

然后就把这部分的swiper初始化的容器名改了：

之前是：new Swiper('.swiper-containe' , {})

现在是：new Swiper('.swiper1' , {})

总结：
其实我这些bug的原因就是：一个页面有多个swiper轮播组件，然后每个都需要初始化，而初始化时的容器名都是相同的，造成了冲突。

只要是最后展示在一个页面中，不管是在父组件还是说在子组件中，都会造成swiper轮播组件冲突问题（我的猜测^_^）

解决办法

解决swiper分页器数量与轮播图数量不对应，轮播有次抽搐的现象

根据上面的内容，我们只要解决了同一个页面中的swiper初始化所造成的冲突，就能够解决这个问题。

简单粗暴的方法：每次初始化swiper组件时，都重新将容器名重新命名，不让其swiper组件都是一个容器名。

这样就成功的解决了：swiper分页器数量与轮播图数量不对应，轮播有次抽搐的现象了。

之前的代码：

第一个组件：

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">1</div>
        <div class="swiper-slide">2</div>
        <div class="swiper-slide">3</div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev d-none d-md-inline-block" ref="swiperBtnPrev"></div>
    <div class="swiper-button-next d-none d-md-inline-block" ref="swiperBtnNext"></div>
</div>

const mySwiper = new Swiper('.swiper-container', {
    pagination: {
        el: '.swiper-pagination',
        clickable: true
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
    },
    // 自动切换
    autoplay: {
        delay: 3000,
        stopOnLastSlide: false, // 播放完最后一张图片后是否停留在最后一张图片上，停止继续轮播。默认false
        disableOnInteraction: false // 用户操作轮播图后，比如点击轮播按钮或小圆点，继续自动轮播
    },
    loop: true
})
mySwiper.el.onmouseover = function () {
    mySwiper.autoplay.stop()
}

mySwiper.el.onmouseout = function () {
    mySwiper.autoplay.start()
}

第二个组件：

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">1</div>
        <div class="swiper-slide">2</div>
        <div class="swiper-slide">3</div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev d-none d-md-inline-block" ref="swiperBtnPrev"></div>
    <div class="swiper-button-next d-none d-md-inline-block" ref="swiperBtnNext"></div>
</div>

const mySwiper = new Swiper('.swiper-container', {
    pagination: {
        el: '.swiper-pagination',
        clickable: true
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
    },
    // 自动切换
    autoplay: {
        delay: 3000,
        stopOnLastSlide: false, // 播放完最后一张图片后是否停留在最后一张图片上，停止继续轮播。默认false
        disableOnInteraction: false // 用户操作轮播图后，比如点击轮播按钮或小圆点，继续自动轮播
    },
    loop: true
})
mySwiper.el.onmouseover = function () {
    mySwiper.autoplay.stop()
}

mySwiper.el.onmouseout = function () {
    mySwiper.autoplay.start()
}

现在的代码：

第一个组件：

<div class="swiper-container swiper1">
    <div class="swiper-wrapper">
        <div class="swiper-slide">1</div>
        <div class="swiper-slide">2</div>
        <div class="swiper-slide">3</div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev d-none d-md-inline-block" ref="swiperBtnPrev"></div>
    <div class="swiper-button-next d-none d-md-inline-block" ref="swiperBtnNext"></div>
</div>

const mySwiper = new Swiper('.swiper1', {
    pagination: {
        el: '.swiper-pagination',
        clickable: true
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
    },
    // 自动切换
    autoplay: {
        delay: 3000,
        stopOnLastSlide: false, // 播放完最后一张图片后是否停留在最后一张图片上，停止继续轮播。默认false
        disableOnInteraction: false // 用户操作轮播图后，比如点击轮播按钮或小圆点，继续自动轮播
    },
    loop: true
})
mySwiper.el.onmouseover = function () {
    mySwiper.autoplay.stop()
}

mySwiper.el.onmouseout = function () {
    mySwiper.autoplay.start()
}

第二个组件：

<div class="swiper-container swiper2">
    <div class="swiper-wrapper">
        <div class="swiper-slide">1</div>
        <div class="swiper-slide">2</div>
        <div class="swiper-slide">3</div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev d-none d-md-inline-block" ref="swiperBtnPrev"></div>
    <div class="swiper-button-next d-none d-md-inline-block" ref="swiperBtnNext"></div>
</div>

const mySwiper = new Swiper('.swiper2', {
    pagination: {
        el: '.swiper-pagination',
        clickable: true
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
    },
    // 自动切换
    autoplay: {
        delay: 3000,
        stopOnLastSlide: false, // 播放完最后一张图片后是否停留在最后一张图片上，停止继续轮播。默认false
        disableOnInteraction: false // 用户操作轮播图后，比如点击轮播按钮或小圆点，继续自动轮播
    },
    loop: true
})
mySwiper.el.onmouseover = function () {
    mySwiper.autoplay.stop()
}

mySwiper.el.onmouseout = function () {
    mySwiper.autoplay.start()
}

解决鼠标移入不暂停的现象

这个问题，其实有可能是你没有设置，或者是你设置的属性不在这个版本生效。

这个问题在swiper官网也有说，链接：https://www.swiper.com.cn/api/autoplay/474.html

（若链接失效，可以直接搜索swiper，相应内容是Autoplay自动切换的pauseOnMouseEnter属性）

这里也简单说一下：

autoplay: {
    // 鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换
    pauseOnMouseEnter: true
}

如果开启了disableOnInteraction，那么自动切换不会恢复。

所以我们一般这样写：

autoplay: {
    delay: 3000,
    // 用户操作轮播图后，比如点击轮播按钮或小圆点，继续自动轮播
    disableOnInteraction: false,
    // 鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换
    pauseOnMouseEnter: true
}

注意：上面的版本只在swiper@6.8.4之后生效，在其之前的需要使用其他的代码:

（但我这里使用swiper@6.8.4还是没生效所以用的swiper@5.4.5）

mySwiper.el.onmouseover = function(){
  mySwiper.autoplay.stop();
}
mySwiper.el.onmouseout = function(){
  mySwiper.autoplay.start();
}

总结

问题1：swiper分页器数量与轮播图数量不对应，轮播有次抽搐的现象

解决方法是：当页面有多个swiper轮播组件时，需要将每个swiper组件在初始化时取不同的容器名

问题2：解决鼠标移入不暂停的现象

解决办法：可能是你没有设置相应的属性；或者你设置了相应的属性，但是你的版本并不支持这个方式，具体可以看官网的描述。

全部的代码

版本是swiper@5.4.5

<div class="swiper-container swiper1">
    <div class="swiper-wrapper">
        <div class="swiper-slide">1</div>
        <div class="swiper-slide">2</div>
        <div class="swiper-slide">3</div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev d-none d-md-inline-block" ref="swiperBtnPrev"></div>
    <div class="swiper-button-next d-none d-md-inline-block" ref="swiperBtnNext"></div>
</div>

const mySwiper = new Swiper('.swiper1', {
    pagination: {
        el: '.swiper-pagination',
        clickable: true
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
    },
    // 自动切换
    autoplay: {
        delay: 3000,
        stopOnLastSlide: false, // 播放完最后一张图片后是否停留在最后一张图片上，停止继续轮播。默认false
        disableOnInteraction: false // 用户操作轮播图后，比如点击轮播按钮或小圆点，继续自动轮播
    },
    loop: true
})
mySwiper.el.onmouseover = function () {
    mySwiper.autoplay.stop()
}

mySwiper.el.onmouseout = function () {
    mySwiper.autoplay.start()
}

冉星 Web Developer，rising star

个人简介：脆弱的种子在温室也会死亡，坚强的种子，在沙漠也能发芽。