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

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

效果演示:

swiper.js简单快速实现轮播滑动(兼容PC端、移动端)_第1张图片
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/dow...
swiper4远程CDN加载地址:
https://www.swiper.com.cn/cdn...

2.HTML内容
  
      
        slider1  
        slider2  
        slider3  
        slider4  
      

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

3.初始化Swiper

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

结语:

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

最后

觉得文章不错的,给我点个赞哇,关注一下呗!
技术交流可关注微信公众号【GitWeb】,加我好友一起探讨

你可能感兴趣的:(javascript,前端,vue.js,html5,segmentfault)