最新消息:关注【已取消】微信公众号,可以获取全套资料,【全套Java基础27天】【JavaEE就业视频4个月】【Android就业视频4个月】

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

HTML5 admin 0浏览 评论

 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/332.html
"文章很值,打赏犒劳作者一下"
微信号: Javaweb_engineer

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

与本文相关的文章

发表我的评论
取消评论

表情

您的回复是我们的动力!

  • 昵称 (必填)

网友最新评论