网站前端开发Swiper3轮播插件的使用

2023-03-20 分类：网站建设

HTML代码

轮播图在网站中使用的比例非常之高，自己手写一个轮播比较费时间，而使用swiper（swiper3）轮播插件能很方便做出图片轮播效果，兼容性好，而且还支持响应式轮播。在项目引入swiper.jquery.min.js和swiper.jquery.min.css文件，html如图：
JS代码

js如图：
如此一个简单的轮播图就制作完成了，当然一般网站的轮播图不会如此简单，这里就需用到swiper的api了，js如图：

JS代码

这里面包含的自动、循环、响应式、控制按钮、显示个数等功能的轮播，当然swiper的功能不止这些，还有很多的api实现的功能。
更多功能Api：
onSlideChangeEnd(swiper)：回调函数，swiper从一个slide过渡到另一个slide结束时执行。可接受swiper实例作为参数。
Effect：slide的切换效果，默认为"slide"（位移切换），可设置为"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）。
paginationType：分页器样式类型，可选：‘bullets’ 圆点（默认）、‘fraction’ 分式、‘progress’ 进度条、‘custom’ 自定义。
lazyLoading：设为true开启图片延迟加载，使preloadImages无效。
需要将图片img标签的src改写成data-src，并且增加类名swiper-lazy。
背景图的延迟加载则增加属性data-background。当设置了slidesPerView:'auto' 或者 slidesPerView > 1，还需要开启watchSlidesVisibility。
controlBy：设定Swiper相互控制时的控制方式。当两个swiper的slide数量不一致时可用。默认为'slide'，自身切换一个slide时，被控制方也切换一个slide。
可选：'container'，按自身slide在container中的位置比例进行控制。
Observer：启动动态检查器(OB/观众/观看者)，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。默认false，不开启，可以使用update()方法更新。
onTransitionEnd(swiper):回调函数，过渡结束时触发，接收Swiper实例作为参数。

如果你使用setWrapperTranslate和setWrapperTransition来设定wrapper移动，这个函数不会触发，你可以使用原生transitionEnd事件。

分享标题：网站前端开发Swiper3轮播插件的使用
本文来源：https://www.cdcxhl.com/news/245914.html

成都网站建设公司_创新互联，为您提供商城网站、营销型网站建设、关键词优化、App开发、网站营销、ChatGPT

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容