下载
首先官网链接:https://www.swiper.com.cn/
在官网点击【获取swiper】–【下载swiper】–选择相应的文档进行下载
使用
将下载的swiper解压缩,然后会发现有很多文件
在官网点击【在线演示】–【swiper基础演示】,选择自己想实现的效果,
比如:
选择了基础滑动(010)
,
则去解压缩的swiper文件夹里,找到demos
文件夹,
其中的010开头的html文件
,就是这个效果,
找到对应的css和js(一般在dist文件夹
里),引入到自己的代码中,
将010里面的script标签中的部分复制到自己的js里,就可以了。
也可以在官网点击【API文档】,查找想用的属性来使用。
swiper指定跳转
-
点击的按钮:需要点击的地方是一个a标签,该标签的href为【#+对应siper-slider的data-hash属性值】,
-
要跳转的位置:将想要跳转到的siper-slider加上一个data-hash属性,
-
声明的swiper中也需要加一个
hashNavigation: {
watchState: true,
},
这么加:
注意:
这么跳转会将改变的data-hash写入地址栏,移动端会唤起微信底部那个小白条导航栏。