html实现轮播手机滑动,swiper.js简单快速实现轮播滑动(兼容PC端、移动端) 以你之姓@ 2022-10-06 10:52 242阅读 0赞 swiper是一款免费以及轻量级轮播滑动的js框架,适用于PC端跟移动端,官方地址:(https://www.swiper.com.cn/) 效果演示: PC端: ![dd103fb3e05d8a479a0992f6fb749c19.gif][] 移动端(在浏览器将设备切换为手机,这里切换为iphone),swiper支持移动端触控左右滑动 ![378402c522051ca3dacb03db0957b41b.gif][] 代码部分(复制粘贴可直接使用): 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 27 var mySwiper = new Swiper('.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远程加载 复制代码 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 var mySwiper = new Swiper('.swiper-container', \{ autoplay:true,//等同于以下设置 /\*autoplay: \{ delay: 3000, stopOnLastSlide: false, disableOnInteraction: true, \},\*/ \}); 复制代码 在js中如果需要添加其他配置选项可以参考swiper4的官方文档: https://www.swiper.com.cn/api/index.html 结语: 在实际的web开发中,总是需要兼容PC跟移动端,如果使用原生js自己写的话,不仅耗时,可能兼容性、稳定性也不好,特别是移动端的touch触控事件。使用swiper便不用考虑到兼容这些事,只要熟悉它的API,便可快速实现手机,电脑网页大部分滑动,焦点图、tab、触摸导航等功能 最后 觉得文章不错的话,给我个关注哇,点个赞呗! 如果对文章有疑问或想技术交流,可关注公众号【GitWeb】与我一起探索学习! [dd103fb3e05d8a479a0992f6fb749c19.gif]: /images/20221005/8e300668423f4bf9a0cb1c9cf512cc87.png [378402c522051ca3dacb03db0957b41b.gif]: /images/20221005/4b517585995044b5bd9d2ea5a51bfc2c.png
还没有评论,来说两句吧...