关注微信公众号 太平洋学习网 扫描二维码
最新消息:关注【太平洋学习网】微信公众号,可以获取全套资料,【全套Java基础27天】【JavaEE就业视频4个月】【Android就业视频4个月】

swiper跳转到指定页面(位置)

HTML5 admin 浏览 评论

 swiper跳转到指定页面(位置)非常简单,也很常见,用的是swiper slideTo方法实现的跳转功能,例如驾照宝典里面的试题,都采用了这样的方法来实现页面跳转,如下。

GIF.gif

还有swiper常见的图片选项功能,都采用了slideTo()方法来实现,选择下面的标签就会跳转到指定的位置上去,看看效果吧。

QQ截图20171030194147.jpg

实现很简单,代码如下。

<script>
 //swiper初始化方法
 var mySwiper = new Swiper('.swiper-container',{
  ....

 })

 //点击下面的选项跳转
 $('#btn').click(function(){
   //切换到第一个slide,速度为1秒
   mySwiper.slideTo(0, 1000, false);
 })
</script>

说明:

Swiper切换到指定位置slide,它会自动将当前页的class设置为swiper-slide-active
index:必选,number类型,指定将要切换到的slide的索引。
speed:可选,number(单位毫秒ms),指切换速度
runCallbacks:可选,boolean,设置为false时不会触发onSlideChange回调函数。

来源网站:太平洋学习网,转载请注明出处:http://www.tpyyes.com/a/html5/2017/1030/332.html