Try   HackMD

[Bootstrap] 透過Slick建立多種輪播功能

tags: Bootstrap

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

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

操作步驟

  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>
  1. 在html建立輪播的內容結構,並在外層使用一個class作標記
<div class="slider">
    <div>slide 1</div>
    <div>slide 2</div>
    <div>slide 3</div>

</div>
  1. slick官網上選擇sliders樣式,複製對應語法到<body><script>

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  1. 經由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:({物件})包含各種設定