slick.js筆記

slick筆記

網址

1.中文網

https://www.slickjs.cn/

2.英文網

http://kenwheeler.github.io/slick/

---

瀏覽器的兼容性

目前實測過主流瀏覽器及ie8以上瀏覽器均可兼容。

---

優點

1、結構簡單

2、兼容ie8+，能夠滿足我們大部分項目的使用

3、配置參數充沛，調用方法豐富

4、專門針對響應式網站

5、雙聯動效果，目前發現較好的優點

---

弊端

1、回調使用獨立出來，書寫就會顯得有些復雜

2、tab選項卡用這個效果會出現閃現bug

3、所有控制級的按鈕功能均通過js加載

---

使用教程

https://www.jqhtml.com/6922.html

https://www.cnblogs.com/chalkbox/p/13159637.html

https://blog.csdn.net/cddcj/article/details/52172863

https://www.dowebok.com/84.html###

---

參數

基本使用參數

參數及默認值	說明	類型
infinite: true,	循環功能	布爾值
autoplay: false,	自動播放	布爾值
arrows: true,	左右箭頭	布爾值
draggable: true,	拖拽功能，啟用鼠標拖動	布爾值
dots: false,	指示點	布爾值
fade:false,	開啟漸隱切換模式	布爾值
centerMode:false,	中心模式	布爾值
slidesToShow: 1,	可見數,幻燈片每屏顯示個數	整數
slidesToScroll: 1,	滾動個數,幻燈片每次滑動個數	整數
autoplaySpeed: 3000,	自動播放速度	整數
speed: 300,	切換動畫速度	整數
appendArrows:$(element),	添加按鈕元素,更改導航箭頭的附加位置 （選擇器，htmlString，數組，元素，jQuery對象）	字符串
appendDots:$(element),	添加切換點元素,更改導航點的附加位置 （選擇器，htmlString，數組，元素，jQuery對象）	字符串
centerPadding:'50px',	中心模式左右內邊距	字符串
asNavFor:null,	聯動,將滑塊設置為其他滑塊的導航（類或ID名稱）	字符串

其他參數

參數及默認值	說明	類型
accessibility:true,	啟用Tab鍵和箭頭鍵導航	布爾值
pauseOnFocus:true,	暫停焦點自動播放	布爾值
pauseOnHover:true,	鼠標懸停暫停自動播放	布爾值
pauseOnDotsHover:false,	懸停點時暫停自動播放	布爾值
swipeToSlide:false,	允許用戶直接拖動或滑動到幻燈片上， 而與slidesToScroll無關	布爾值
useTransform:false,	啟用/禁用CSS轉換	布爾值
variableWidth:false,	可變寬度的幻燈片	布爾值
verticalSwiping:false,	垂直滑動模式	布爾值
vertical:false,	縱向滾動參數	布爾值
rtl:false,	更改滑塊的方向以從右到左	布爾值
waitForAnimate:true,	忽略動畫時前進幻燈片的請求	布爾值
mobileFirst:false,	響應式設置使用移動優先計算	布爾值
focusOnSelect:false,	啟用對選定元素的（單擊切換）	布爾值
adaptiveHeight:false,	為單滑塊水平輪播啟用自適應高度。	布爾值
useCSS:true,	使用 CSS3 過度	布爾值
touchMove:true,	觸摸滑動	布爾值
swipe:true,	移動設備滑動事件	布爾值
touchThreshold:5,	滑動切換閾值，即滑動多少像素后切換	整數
zIndex:1000,	設置幻燈片的zIndex值，對IE9和更低版本有用	數值
slidesPerRow:1,	通過“行”選項初始化網格模式后， 可以設置每個網格行中有多少張幻燈片	數值
rows:1,	將此設置為大於1將初始化網格模式。 使用slidesPerRow設置每行應有多少張幻燈片。 (輪播行數)	數值
initialSlide:0,	滑動即可開始	數值
edgeFriction:0.15,	滑動非無限輪播邊緣時的阻力	數值
cssEase:‘ease’,	CSS3 動畫	字符串
easing:‘linear’,	animate() fallback easing	字符串
lazyLoad:‘ondemand’,	延遲加載，可選 ondemand 和 progressive	字符串
dotsClass:'slick-dots',	滑動指示器點容器類	字符串
slide:‘div’,	滑動元素查詢	字符串
respondTo:'window',	響應對象響應的寬度。 可以是“窗口”，“滑塊”或“最小”（兩者中較小的一個）	字符串
prevArrow:$(element), prevArrow:Previous,	允許您選擇節點或為“上一個”箭頭自定義HTML	代碼段/element
nextArrow:$(element), nextArrow:Next,	允許您選擇節點或為“下一步”箭頭自定義HTML。	代碼段/element
customPaging	自定義分頁,默認n/a	function
responsive	斷點觸發設置,默認null	object
onBeforeChange(this, index)	開始切換前的回調函數,默認null	method
onAfterChange(this, index)	切換后的回調函數,默認null	method
onInit(this)	第一次初始化后的回調函數,默認null	method
onReInit(this)	再次初始化后的回調函數,默認null	method

---

回調

回調方法是獨立的，建議都寫到你所調用的slick之上

需掌握回調

方法	對象	說明
init	event, slick	初始化（當前對象，對象，）
beforeChange	event, slick, currentSlide, nextSlide	更換幻燈片前觸發（當前對象，對象，當前索引，下一個索引）
afterChange	event, slick, currentSlide	更換幻燈片前觸發（當前對象，對象，當前索引，）
destroy	event, slick	摧毀（當前對象，對象，）

初始化

// 初始化
$(".Slick .bd").on("init", function(event, slick) {

});

普通傳值

// 初始化
$(".Slick .bd").on("init", function(event, slick) {
       var title = $(".Slick .slick-current.slick-active").find(".text .title").html();
       $(".prodC1ConL .prodC1ConLCon .title").html(title);
});

居中模式傳值

// 初始化
$(".Slick .bd").on("init", function(event, slick) {
       var title = $(".Slick .slick-current.slick-center").find(".text .title").html();
       $(".prodC1ConL .prodC1ConLCon .title").html(title);
});

更換幻燈片前觸發

// 更換幻燈片前觸發
$(".Slick .bd").on("beforeChange", function(event, slick, currentSlide, nextSlide){
   
});

傳值

// 更換幻燈片前觸發
$(".Slick .bd").on("beforeChange", function(event, slick, currentSlide, nextSlide){
       var title = $(".Slick .myslide").eq(nextSlide).find(".text .title").html();
       $(".prodC1ConL .prodC1ConLCon .title").html(title);
});

更換幻燈片后觸發

//更換幻燈片后觸發
$(".Slick .bd").on("afterChange", function(event, slick, currentSlide){

});

---

方法

方法	Argument	說明
slick()	options : object	初始化 slick
unslick()		銷毀 slick
slickNext()		切換下一張
slickPrev()		切換上一張
slickPause()		暫停自動播放
slickPlay()		開始自動播放
slickGoTo()	index : int	切換到第 x 張
slickCurrentSlide()		返回當前幻燈片索引
slickAdd()	element : html or DOM object, index: int, addBefore: bool	Add a slide. If an index is provided, will add at that index, or before if addBefore is set. If no index is provided, add to the end or to the beginning if addBefore is set. Accepts HTML String
slideRemove()	index: int, removeBefore: bool	Remove slide by index. If removeBefore is set true, remove slide preceding index, or the first slide if no index is specified. If removeBefore is set to false, remove the slide following index, or the last slide if no index is set.
slickFilter()	filter : selector or function	Filters slides using jQuery .filter syntax
slickUnfilter()		Removes applied filter
slickSetOption(option,value,refresh)	option : string(option name), value : depends on option, refresh : 布爾值	Sets an option live. Set refresh to true if it is an option that changes the display

---

一般使用

引入文件

<link href="components/slick/slick.css" rel="stylesheet">
<script src="components/slick/slick.min.js"></script>

html結構

<div class="Slick">
	<div class="bd">
		<%for(int i=0;i<6;i++){%>
		<div class="myslide">
			<div class="slickCon">

			</div>
		</div>
		<%}%>
	</div>
</div>

js調用

<script type="text/javascript">
	$(".Slick .bd").slick({
		infinite: true, //循環功能
		slidesToShow: 1, //可見數
		slidesToScroll: 1, //滾動個數
		autoplay: true, //自動播放
		arrows: true, //左右箭頭
		draggable: true, //拖拽功能
		dots: true, //指示點
		fade:false,// 開啟漸隱切換模式
		autoplaySpeed: 5000, //自動播放速度
		speed: 1500, //切換動畫速度
	});
</script>

css樣式

.Slick .prev,
.Slick .next{display: block;width: 50px;height: 50px;border-radius: 50%;background: rgba(0,0,0,0.6);cursor: pointer;position: absolute;z-index: 2;top: 0;bottom: 0;margin: auto 0;}
.Slick .prev {left: 0;}
.Slick .next {right: 0;}
.Slick .prev::before,
.Slick .next::before{display: block;content: '';color: #FFFFFF;width: 10px;height: 10px;position: absolute;top: 20px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
.Slick .prev::before{left: 20px;border-left: solid 1px currentColor;border-top: solid 1px currentColor;}
.Slick .next::before{left: 18px;border-bottom: solid 1px currentColor;border-right: solid 1px currentColor;}
.Slick .slick-dots {position: absolute;bottom: 15px;left: 0;width: 100%;text-align: center;font-size: 0;}
.Slick .slick-dots li {border: 1px solid #FFFFFF;width: 10px;height: 10px;border-radius: 50%;margin: 0 10px;display: inline-block;vertical-align: middle;cursor: pointer;position: relative;}
.Slick .slick-dots li.slick-active {border: 1px solid #FFFFFF;background: #FFFFFF;}
.Slick {position: relative;overflow: hidden;}
.Slick .bd {overflow: hidden;}
.Slick .slick-list {overflow: visible;}
.Slick .myslide {float: left;display: inline;}
.Slick .slickCon {display: block;}

---

聯動使用

引入文件

<link href="components/slick/slick.css" rel="stylesheet">
<script src="components/slick/slick.min.js"></script>

html結構

<div class="tabSlick">
	<div class="bd">
		<%for(int i=0;i<6;i++){%>
		<div class="myslide">
			<div class="con">
			<!--滑塊內容區start-->
			導航<%=i+1%>
			<!--滑塊內容區end-->
			</div>
		</div>
		<%}%>
	</div>
</div>
<div class="tabCSlick">
	<div class="bd">
		<%for(int i=0;i<6;i++){%>
		<div class="myslide">
			<div class="con">
			<!--滑塊內容區start-->
			內容<%=i+1%>
			<!--滑塊內容區end-->
			</div>
		</div>
		<%}%>
	</div>
</div>

js調用

<script type="text/javascript">
	$('.tabSlick .bd').slick({
		slidesToShow: 3,
		slidesToScroll: 1,
		asNavFor: '.tabCSlick .bd',
		dots: true,
		centerMode: true,
		focusOnSelect: true
	});
	$('.tabCSlick .bd').slick({
		slidesToShow: 1,
		slidesToScroll: 1,
		arrows: false,
		fade: true,
		asNavFor: '.tabSlick .bd'
	});
</script>

---

slick代碼塊

html結構

"slick": {
	"body": [
		"<div class=\"Slick\">",
		"\t<div class=\"bd\">",
		"\t\t<%for(int i=0;i<6;i++){%>",
		"\t\t<div class=\"myslide\">",
		"\t\t\t<div class=\"slickCon\">",
		"\t\t\t\t$1",
		"\t\t\t</div>",
		"\t\t</div>",
		"\t\t<%}%>",
		"\t</div>",
		"</div>"
	],
	"prefix": "slick",
	"scope": "text.html.basic",
	"triggerAssist": true
},

js調用

"slick": {
	"body": [
		"$(\".Slick .bd\").slick({",
			"\tinfinite: true, //循環功能",
			"\tslidesToShow: 1, //可見數",
			"\tslidesToScroll: 1, //滾動個數",
			"\tautoplay: true, //自動播放",
			"\tarrows: true, //左右箭頭",
			"\tdraggable: true, //拖拽功能",
			"\tdots: true, //指示點",
			"\tfade:false,// 開啟漸隱切換模式",
			"\tautoplaySpeed: 5000, //自動播放速度",
			"\tspeed: 1500, //切換動畫速度",
		"});"
	],
	"prefix": "slick",
	"scope": "source.js",
	"triggerAssist": true
},

css樣式

"slick": {
	"body": [
		".Slick .prev,",
		".Slick .next{display: block;width: 50px;height: 50px;border-radius: 50%;background: rgba(0,0,0,0.6);cursor: pointer;position: absolute;z-index: 2;top: 0;bottom: 0;margin: auto 0;}",
		".Slick .prev {left: 0;}",
		".Slick .next {right: 0;}",
		".Slick .prev::before,",
		".Slick .next::before{display: block;content: '';color: #FFFFFF;width: 10px;height: 10px;position: absolute;top: 20px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}",
		".Slick .prev::before{left: 20px;border-left: solid 1px currentColor;border-top: solid 1px currentColor;}",
		".Slick .next::before{left: 18px;border-bottom: solid 1px currentColor;border-right: solid 1px currentColor;}",
		".Slick .slick-dots {position: absolute;bottom: 15px;left: 0;width: 100%;text-align: center;font-size: 0;}",
		".Slick .slick-dots li {border: 1px solid #FFFFFF;width: 10px;height: 10px;border-radius: 50%;margin: 0 10px;display: inline-block;vertical-align: middle;cursor: pointer;position: relative;}",
		".Slick .slick-dots li.slick-active {border: 1px solid #FFFFFF;background: #FFFFFF;}",
		".Slick {position: relative;overflow: hidden;}",
		".Slick .bd {overflow: hidden;}",
		".Slick .slick-list {overflow: visible;}",
		".Slick .myslide {float: left;display: inline;}",
		".Slick .slickCon {display: block;}"
	],
	"prefix": "slick",
	"scope": "CSS_OUTRULE"
}

---

查看總共有幾個myslide

slick.slideCount

判斷是否開啟循環

slick.options.infinite

把指示點換成數字

// 初始化
$(".Slick .bd").on("init", function(event, slick) {
        $(".Slick .slick-dots li").each(function(){
            $(this).text('0'+($(this).index()+1))
        });
});

---

焦點輪播

html結構

<div class="Slick">
    <div class="bd">
        <%for(int i=0;i<6;i++){%>
        <div class="myslide">
            <div class="slickCon imghover" data-title="<%=i+1%>標題">
                <div class="pic">
                    <a href="">
                        <img src="test/images/Slick.jpg" />
                    </a>
                </div>
            </div>
        </div>
        <%}%>
		</div>
	<div class="SlickBtn">
		<div class="SlickDots"></div>
		<div class="SlickText"><div class="title"></div></div>
	</div>
</div>

js調用

<script type="text/javascript">
	// 初始化
	$(".Slick .bd").on("init", function(event, slick) {
		var title = $(".Slick .myslide.slick-current.slick-active").find(".slickCon").data("title");
		$(".SlickText .title").html(title)
	});
	// 更換幻燈片前觸發
	$(".Slick .bd").on("beforeChange", function(event, slick, currentSlide, nextSlide){
		var title = $(".Slick .myslide").eq(nextSlide + 1).find(".slickCon").data("title");
		$(".SlickText .title").html(title)
	});
	$(".Slick .bd").slick({
		infinite: true, //循環功能
		slidesToShow: 1, //可見數
		slidesToScroll: 1, //滾動個數
		autoplay: true, //自動播放
		arrows: true, //左右箭頭
		draggable: true, //拖拽功能
		dots: true, //指示點
		fade:false,// 開啟漸隱切換模式
		autoplaySpeed: 5000, //自動播放速度
		speed: 1500, //切換動畫速度
		appendDots:".SlickDots"
	});
</script>

css樣式

.Slick .prev,
.Slick .next{display: block;width: 50px;height: 50px;border-radius: 50%;background: rgba(0,0,0,0.6);cursor: pointer;position: absolute;z-index: 2;top: 0;bottom: 0;margin: auto 0;}
.Slick .prev {left: 0;}
.Slick .next {right: 0;}
.Slick .prev::before,
.Slick .next::before{display: block;content: '';color: #FFFFFF;width: 10px;height: 10px;position: absolute;top: 20px;transform: rotate(-45deg);transform: rotate(-45deg);-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
.Slick .prev::before{left: 20px;border-left: solid 1px currentColor;border-top: solid 1px currentColor;}
.Slick .next::before{left: 18px;border-bottom: solid 1px currentColor;border-right: solid 1px currentColor;}
.SlickDots{float: right;width: 100px;}
.SlickDots .slick-dots {height: 60px;text-align: center;font-size: 0;line-height: 60px;overflow: hidden;}
.SlickDots .slick-dots li {border: 1px solid #FFFFFF; display: inline-block;width: 8px;height: 8px;border-radius: 100%;margin: 0 4px;vertical-align: middle;cursor: pointer;}
.SlickDots .slick-dots li.slick-active {background: #FFFFFF;}
.SlickBtn{width: 100%;background: rgba(0,0,0,0.6);position: absolute;left: 0;bottom: 0;overflow: hidden;z-index: 5;}
.SlickText{overflow: hidden;padding-left: 20px;}
.SlickText .title{font-size: 16px;color: #FFFFFF;height: 60px;line-height: 60px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.Slick {position: relative;overflow: hidden;}
.Slick .bd {overflow: hidden;}
.Slick .slick-list {overflow: visible;}
.Slick .myslide {float: left;display: inline;}
.Slick .slickCon {display: block;transition: all 0.4s;-webkit-transition: all 0.4s;}
.Slick .slickCon .pic::before{padding-top: 66.7143%;}