轮播图与图片查看器

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

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

 

原文地址:https://www.cnblogs.com/zhinian-/p/12518434.html