swiper如何跳转到指定页

 时间:2024-10-20 08:46:18

1、提出疑问使用过swiper的小伙伴应该都清楚,swiper经典模式就是幻灯片滑块效果,同时它还支持手机拖动切换,是款非常强大的插件,如下图所示,但问题来了,平时我们比较多的是直接切换或拖动图片到下一页,如何当前页面有一个按钮,想直接跳到第三页,该如何实现呢?

swiper如何跳转到指定页

2、代码展示小编的代码如下所示,直接用了swiper的div标准模式,然后配上new Swiper的构造函数;

swiper如何跳转到指定页

3、解决方法一如果是在pc端,我们想切换到第鹩梏钔喔三页,我们可以直接点击底部的第三个小圆圈,那我们想点击按钮跳到“第三页”,我们直接模拟点击第三个小圆圈不就可以了。于是可以这样写:$('.swiper-pagination span').eq(2).trigger('click');

swiper如何跳转到指定页
swiper如何跳转到指定页

4、解决方法二swiper本身就是很强大的插竭惮蚕斗件,也提供有专门的跳转指定页面方法。所以也可以这样写:swiper.s造婷用痃lideTo(3, 1000, false);slideTo方法有三个参数:第一个参数是指定切换到某一页的索引;第二个参数是切换速度;第三个参数是布尔值,表示是否要触发onSlideChange回调函数;

swiper如何跳转到指定页

5、延伸一如果要切换到上一页;可以用swiper.slidePrev()方法;

swiper如何跳转到指定页

6、延伸二要切换到下一页,可用swiper.slideNext()方法;

swiper如何跳转到指定页
  • idea使用教程
  • 如何有效使用QtCreator的侧边栏
  • 一加9r怎么关闭上方hd图标
  • [控制台(6)] 管理控制台窗口[TZZ]
  • intellij ideal如何修改文件缩进格式
  • 热门搜索
    我和祖国共成长手抄报 爱牙手抄报 庆祝六一手抄报 五四手抄报 重阳节的手抄报简单又漂亮 我爱我班手抄报 劳动手抄报内容50字 手抄报设计大全 新冠肺炎手抄报 茶文化手抄报