swiper 点击切换轮播图实现

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="data: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>

案例图：

swiper 点击切换轮播图实现相关推荐

html百叶窗切换效果,纯CSS3百叶窗式切换轮播图特效
这是一款使用纯CSS3制作的百叶窗式切换轮播图特效.该特效使用背景图片来制作,在轮播图切换时,通过一组div元素来制作百叶窗效果,非常的炫酷. 使用方法 HTML结构该轮播图特效中使用了6张背景图片 ...
使用hammer.js实现移动端手指滑动切换轮播图教程
今天面试前端开发时,要求在移动端实现手指滑动切换轮播图这里我用到 bootsrap 的轮播图组件 + hammer.js 库文章参考: Hammer.js - 李林峰的园子 - 博客园 (cnbl ...
轮播图的实现，点击按钮切换轮播图等功能
菜单区域实现划过主菜单显示子菜单轮播区域实现 1.点击图片中左右箭头,分别跳转上一张与下一张 (1)点击上一张图其实就是让一个变量进行递减,点击下一张图就是让变量递增:(控制索引最大最小值) 2. ...
bootstrap轮播图原点变为方块_JS实现无缝切换轮播图(自动+手动)
一.背景说起轮播图,大家应该都不陌生,各大购物网站和面试题里都能看到它的身影. 实现上也并不困难,而写这篇文章是想整理一下自己心血来潮写的代码,以及实现过程中的一些思考,大家也可以顺便复习巩固一下. ...
层叠轮播图、小程序3D轮播图、小程序轮播图、折叠轮播图、叠式轮播图、微信小程序叠式轮播图实现、小程序层叠轮播图swiper、Taro层叠轮播图、Taro叠式轮播图
好久没写博客了,最近这项目中有个叠式轮播的需求在网上找了一堆都没有自己想要的最开始被 TaroUI和小程序自带的swiper困扰一直以为是swpier的升级版试了好久也没改造成功干脆自 ...
通过swiper插件制作旋转木马轮播图
实现效果: swiper插件准备我们旋转木马轮播图的效果可以通过swiper插件轻松搞定这种效果是不是和我们要做的很像呀,我们只要把它引入我们的案例就ok了在swiper官网的获取swiper下 ...
微信小程序之视图容器（swiper）组件创建轮播图
一.视图容器(Swiper) 1.swiper:滑块视图容器微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/swi ...
java照片切换播放音乐_音乐播放器-图片切换-轮播图效果
* { margin: 0; padding: 0; border: 0; } CSS3 @keyframes 动画效果 @keyframs myframes{ from{ } to{ transfo ...
html点击小图轮播图,使用纯CSS实现点击轮播图效果，无js。
使用纯CSS实现图片轮播效果首先我们来看一下所实现轮播图的最终效果: 轮播图效果接下来为html+css代码部分: 以下为HTML代码部分: 以下为CSS代码部分: *{ margin:0; p ...

swiper 点击切换轮播图实现

mySwiper.slideTo(index, speed, runCallbacks

swiper 点击切换轮播图实现相关推荐

最新文章

热门文章