Slick_迅速搭建的輪播套件

本文总阅读量次

介紹

Slick官網提供多種輪播樣式，可進行滑動、設定輪播等功能，我們只需要選定輪播形式後，引用js、css套件，即可使用它所支援的slider樣式。

操作步驟

搜尋並引入slick cdn，加入css及js相對應程式碼

將slick.css複製到中

1
2
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />

slick.js複製到段底部

1
2

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>

在html建立輪播的內容結構，並在外層使用一個class作標記

1
2
3
4
5
6
7

<div class="slider">
    <div>slide 1</div>
    <div>slide 2</div>
    <div>slide 3</div>

</div>

在slick官網上選擇sliders樣式，複製對應語法到body、script中

經由optional控制元素來調整輪播、滑動等功能設定

1
2
3
4
5
6
7
8
9
10
11
12
13
arrows: (boolean值)是否顯示左右箭頭功能
dots:(boolean值)是否顯示下方小圓點功能
autoplay：(boolean值)是否自動播放
autoplaySpeed:(毫秒值)自動播放的速度
slidesToShow:(數量值)一次主要顯現幾個slides
slidesToScroll:(數量值)每次滑動幾張slides
fade:(boolean值)是否採用淡出/淡入效果
infinite：(boolean值)滑到最後一張，是否繼續從回到一開始同向循環(4>1>2>3>…)，或是逆轉向循環(4>3>2>…)
centerMode:(boolean值)是否同時顯現前後兩張slide的部分內容
centerPadding:(px值)搭配centerMode:true使用，表示前後兩張slide要顯現多少範圍
responsive:(陣列)針對不同尺寸做額外設定
breakpoint:(螢幕尺寸)
settings:({物件})包含各種設定

實作

Slick幻燈片: 運動頻道