一般demo

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="swiper" id="swiper1">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="images/index-swiper-pic1.png">
        </div>
        <div class="swiper-slide">
            <img src="images/index-swiper-pic7.png">
        </div>
    </div>
</div>
<script>
    let swiper1 = new Swiper(`#swiper1`, {})
</script>

自动轮播

1
2
3
4
5
let swiper1 = new Swiper(`#swiper1`, {
    autoplay:{
        delay: 3000, // 自动轮播间隔时间
    }
})

跳转到指定索引

1
2
3
4
var mySwiper = new Swiper('.swiper');
    mySwiper.slidePrev(); // 上一页
    mySwiper.slideNext(); // 下一页
    mySwiper.slideTo(0, 1000, false);//切换到第一个slide，速度为1秒

在Loop模式下Swiper切换到指定slide。切换到的是slide索引是realIndex
比如你的swiper是loop模式且只复制一个slide(默认情况)，你想跳转到第三个slide时（activeIndex:3/realIndex:2），应该使用slideTo(3)或者slideToLoop(2)。

1
mySwiper.slideToLoop(0, 1000, false);//切换到第一个slide，速度为1秒

禁止触摸滑动

在官方文档的Touches(触发条件)中
设置是否允许触摸滑动。如果设为 false 时，那么切换幻灯片的唯一方法是使用外部 API 函数，例如slideNext()或slidePrev()或slideTo() 等。等同于Swiper3.x 的 onlyExternal。

1
2
3
let swiper1 = new Swiper(`#swiper1`, {
    allowTouchMove: false, // 禁止触摸滑动
})

手动操作以后不停止轮播

swiper2.0

1
2
3
{
    autoplayDisableOnInteraction:false, // 手动操作以后不停止轮播
}

swiper4.0+

1
2
3
4
5
6
var mySwiper = new Swiper('.swiper-container', {
    autoplay: {
        delay: 3000,
        disableOnInteraction: true,
    }
});