swiper 点击切换轮播图实现

article/2025/9/23 11:31:15

mySwiper.slideTo(index, speed, runCallbacks

控制Swiper切换到指定slide。

参数名类型是否必填描述
index num 必选指定将要切换到的slide的索引
speed num 可选切换速度(单位ms)
runCallbacks boolean 可选设置为false时不会触发transition回调函数

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="images/index.css"><link rel="stylesheet" href="images/swiper-bundle.min.css">
</head>
<body><ul class="lifecycle-list " style="margin: auto; width: 407px;"><li><span>1</span></li><li><span>2</span></li><li><span>3</span></li><li><span>4</span></li><li><span>5</span></li><li><span>6</span></li><li><span>7</span></li><li><span>8</span></li></ul><div class="swiper swiper-container"><ul class="swiper-wrapper"><li class="swiper-slide"><div class="swiper-center"> 1 <img src="./images/0.jpg" alt="" style="width:100%;height:100%"></div></li><li class="swiper-slide"><div class="swiper-center"> 2 <img src="./images/1.jpg" alt="" style="width:100%;height:100%"></div></li><li class="swiper-slide"><div class="swiper-center"> 3 <img src="./images/2.jpg" alt="" style="width:100%;height:100%"></div></li><li class="swiper-slide"><div class="swiper-center"> 4 <img src="./images/3.jpg" alt="" style="width:100%;height:100%"></div></li><li class="swiper-slide"><div class="swiper-center"> 5 <img src="./images/4.jpg" alt="" style="width:100%;height:100%"></div></li><li class="swiper-slide"><div class="swiper-center"> 6 <img src="./images/5.jpg" alt="" style="width:100%;height:100%"></div></li><li class="swiper-slide"><div class="swiper-center"> 7 <img src="./images/6.jpg" alt="" style="width:100%;height:100%"></div></li><li class="swiper-slide"><div class="swiper-center"> 8 <img src="./images/7.jpg" alt="" style="width:100%;height:100%"></div></li></ul><div class="swiper-pagination"></div></div>
</body>
</html>
<script src="images/swiper-bundle.min.js"></script>
<script src="./images/jQuery.js"></script>
<script>var mySwiper1 = new Swiper(' .swiper-container', {slidesPerView: 'auto',observer: true,observeParents: true,observeSlideChildren: true,loop: true,loopAdditionalSlides: 7,breakpoints: {1200: {spaceBetween: 12,slidesPerView: 5},768: {spaceBetween: 20,slidesPerView: 2}},on: {transitionEnd: function (swiper) {$(".lifecycle-list li").eq(this.realIndex).addClass('active').siblings().removeClass("active")},},});$(".lifecycle-list li:first").addClass("active")$(".lifecycle-list li").click(function (e) {mySwiper1.slideTo($(this).index() + $(".lifecycle-list li").length, 500, false);$(this).addClass("active").siblings().removeClass('active');})
</script>