移动端swiper做页面切换，如何让做最后一页滑动时回到第一页_软件运维

1、首先把Swiper的开发包下载下来。然后查看下demo的格式，发现是一个三层结构，加一个分页swiper-pagination（这个可有可无），然后通过 new Swiper初始化。

2、项目中只需要把css和js引入即可。

3、然后通过代码循环加载swiper-slide结构的，因为目前程序中只有4张图片，所以下面单独加了两张。

4、设置4.5视图模式，JS直接给赋值成4.5即可，new Swiper('#home2',{slidesPerView: 4.5})。

5、最后实现效果图，就完成了。

1、首先需要打开HBuilderX开发工具，创建一个Web项目，并将swiper插件对应的CSS和JavaScript文件拷贝到项目中。

2、然后新建一个静态页面，然后将swiper插件的文件引入到页面中。

3、接着在<body></body>标签中，插入多个div标签并设置class属性。

4、利用类选择器和伪类选择器nth-child，设置几个div标签的样式。

5、调用jquery初始化函数，对swiper插件进行初始化，设置autoplay属性。

6、最后保存代码并运行项目，打开浏览器查看界面效果。

1、1：1触控运动 Swiper默认提供1:1的触控距离，当然，这个比率是可以设置的。（touchRatio） 2、触控模仿这个功能对于开发桌面网站会很有用。简单来说，就是因为Swiper能够让鼠标事件表现得像触屏事件（点击以及拖曳滑块）

欢迎分享，转载请注明来源：内存溢出

移动端swiper做页面切换，如何让做最后一页滑动时回到第一页