swiper.js简单快速实现轮播滑动（兼容PC端、移动端）

文章点赞收藏，再细细品尝 

swiper是一款免费以及轻量级轮播滑动的js框架，适用于PC端跟移动端，官方地址：(https://www.swiper.com.cn/)

效果演示：

PC端

移动端（在浏览器将设备切换为手机，这里切换为iphone），swiper支持移动端触控左右滑动

代码部分（复制粘贴可直接使用）：

 1 
 2 
 3 
 4 Swiper.js简单快速实现轮播滑动（兼容PC端、移动端）
 5 
 6 
 7 
 8 
 9 
10 
11 
12     
13  
14      
15      slider1
16      slider2
17      slider3
18      slider4
19  
20  
21  
22  
23     
24 
25 
26

使用方法：

1.首先需要在head头部加载插件，需要用到的文件有swiper.css和swiper.js文件。可下载swiper文件或使用CDN远程加载

swiper4文件下载地址：
https://www.swiper.com.cn/download/index.html

swiper4远程CDN加载地址：
https://www.swiper.com.cn/cdn/index.html

2.HTML内容

    
 slider1
 slider2
 slider3
 slider4

上面的HTML内容是固定模板，如果需要添加左右箭头或者分页器等其他组件可以参考swiper4的官方文档：https://www.swiper.com.cn/api/index.html

3.初始化Swiper

在js中如果需要添加其他配置选项可以参考swiper4的官方文档：
https://www.swiper.com.cn/api/index.html

结语：

在实际的web开发中，总是需要兼容PC跟移动端，如果使用原生js自己写的话，不仅耗时，可能兼容性、稳定性也不好，特别是移动端的touch触控事件。使用swiper便不用考虑到兼容这些事，只要熟悉它的API，便可快速实现手机，电脑网页大部分滑动，焦点图、tab、触摸导航等功能

最后：

觉得文章不错的，点个赞嘿，关注下呗 

swiper.js简单快速实现轮播滑动（兼容PC端、移动端）

CSS教程相关栏目本月热门文章