swiper是一款免费以及轻量级轮播滑动的js框架,适用于PC端跟移动端,官方地址:(/)
效果演示:
PC端
移动端(在浏览器将设备切换为手机,这里切换为iphone),swiper支持移动端触控左右滑动
代码部分(复制粘贴可直接使用):
1 html>
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
27 varmySwiper=newSwiper('.swiper-container',{//初始化Swiper
28 autoplay:{//自动切换
29 delay:3000,
30 stopOnLastSlide:false,
31 disableOnInteraction:false,
32 },
33 navigation:{//前进后退
34 nextEl:'.swiper-button-next',
35 prevEl:'.swiper-button-prev',
36 },
37 pagination:{//分页器
38 el:'.swiper-pagination',
39 clickable:true,
40 },
41 loop:true,//循环
42 })
43
使用方法:
1.首先需要在head头部加载插件,需要用到的文件有swiper.css和swiper.js文件。可下载swiper文件或使用CDN远程加载
2.HTML内容
slider1slider2slider3slider4
上面的HTML内容是固定模板,如果需要添加左右箭头或者分页器等其他组件可以参考swiper4的官方文档:/api...
3.初始化Swiper
varmySwiper=newSwiper('.swiper-container',{
autoplay:true,//等同于以下设置
/*autoplay:{
delay:3000,
stopOnLastSlide:false,
disableOnInteraction:true,
},*/
});
在js中如果需要添加其他配置选项可以参考swiper4的官方文档:
/api...
结语:
在实际的web开发中,总是需要兼容PC跟移动端,如果使用原生js自己写的话,不仅耗时,可能兼容性、稳定性也不好,特别是移动端的touch触控事件。使用swiper便不用考虑到兼容这些事,只要熟悉它的API,便可快速实现手机,电脑网页大部分滑动,焦点图、tab、触摸导航等功能
最后
觉得文章不错的,给我点个赞哇,关注一下呗!
技术交流可关注微信公众号【GitWeb】,加我好友一起探讨
关于找一找教程网
本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[swiper.js简单快速实现轮播滑动(兼容PC端、移动端)]/tech/detail-105473.html