# [Bootstrap] 透過Slick建立多種輪播功能 ###### tags: `Bootstrap` [Slick](https://kenwheeler.github.io/slick/)提供多種輪播樣式，可進行滑動、設定輪播等功能，我們只需要選定輪播形式後，引用js、css套件，即可使用它所支援的slider樣式。 ![](https://i.imgur.com/75Dvc8W.png) ## 操作步驟 1. 搜尋並引入slick cdn，加入css及js相對應程式碼 將slick.css複製到<head>中 ``` <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複製到<body>段 ``` <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script> ``` 2. 在html建立輪播的內容結構，並在外層使用一個class作標記 ``` <div class="slider"> <div>slide 1</div> <div>slide 2</div> <div>slide 3</div> </div> ``` 3. 在[slick官網](https://kenwheeler.github.io/slick)上選擇sliders樣式，複製對應語法到`<body><script>`中 ![](https://i.imgur.com/pHpxsYI.png) 4. 經由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:({物件})包含各種設定