轮播图与图片查看器

记录下两款好用的轮播图插件：

Swiper

官网：https://www.swiper.com.cn/

常用配置项：

            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