Slick-快速打造一個carousel

Posted on April 4, 2019 本文总阅读量次

Slick-快速打造一個carousel

Slick是什麼？

提供多種輪播樣式，以多組圖片輪播切換的套件，可應用於更多張圖片的展示。附上原始碼，複製貼上，即可使用現成的sliders樣式。

操作流程

引入slick cdn

CSS
搜尋slick cdn，找到slick-carousel cdn資源，將slick.css及slick-theme.css主題樣式複製到<head>中

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" />

JS
再將slick.js複製到</body>結束前且jquery後

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

先在html建立好carousel的內容結構，並在外層給予一個class作為標記

<div class="slider">
    <div>slide 1</div>
    <div>slide 2</div>
    <div>slide 3</div>
    <div>slide 4</div>
    <div>slide 5</div>
</div>
``` 
4. 進入[slick](http://kenwheeler.github.io/slick/)，選擇sliders樣式，複製下方的語法到`<body><script>`中
![](https://i.imgur.com/3VT5R1U.png)


### optional控制元素
* **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**:({物件})包含各種設定
### 實作
```htmlmixed=
 <div class="container">
    <div class="slider">
        <div class="slide-1"></div>
        <div class="slide-2"></div>
        <div class="slide-3"></div>
        <div class="slide-4"></div>
    </div>
</div>

 <script>
    $('.slider').slick({
        centerMode:true,
        centerPadding: '100px',
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplaySpeed: 2000,  
        dots: true,
        arrows: true,
    });
            
</script>

成果

My Project-LonelyPlanet-About page