400-800-9385
网站建设资讯详细

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

发表日期:2021-01-11 09:03:50   作者来源:严成   浏览:140   标签:网站前端开发    
轮播图在网站中使用的比例非常之高,自己手写一个轮播比较费时间,而使用swiper(swiper3)轮播插件能很方便做出图片轮播效果,兼容性好,而且还支持响应式轮播。在项目引入swiper.jquery.min.js和swiper.jquery.min.css文件,html如图:

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事件。
人为中断过渡不会触发这个函数。 
如没特殊注明,文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/5945.html