记录下两款好用的轮播图插件:
Swiper
常用配置项:
var swiper = new Swiper('.swiper-container', { nextButton: '.swiper-button-next',//后退 prevButton: '.swiper-button-prev',//前进 slidesPerView: 6,//设置slider容器能够同时显示的slides数量(carousel模式)。 centeredSlides: true,//设定为true时,活动块会居中,而不是默认状态下的居左。 spaceBetween: 5,//slide之间的距离(单位px) preventClicks : false,//当swiper在触摸时阻止默认事件(preventDefault) observer:true,// (动态插入数据,自动初始化) 当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper observeParents:true,// (动态插入数据,自动初始化) 将observe应用于Swiper的父元素。当Swiper的父元素变化时,例如window.resize,Swiper更新 loop:true,//是否开启循环模式 slideToClickedSlide: true,//设置为true则点击slide会过渡到这个slide。 });
slick
官网:http://kenwheeler.github.io/slick/
中文详解参考:https://www.awesomes.cn/repo/kenwheeler/slick
图片查看器:
viewerjs
官网:https://fengyuanchen.github.io/viewerjs/
中文详解参考:https://www.dowebok.com/192.html