By

CDN

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

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

Code

<ul class="container">
  <li><img src="https://picsum.photos/400/200?image=1" alt=""/></li>
  <li><img src="https://picsum.photos/400/200?image=2" alt=""/></li>
  <li><img src="https://picsum.photos/400/200?image=3" alt=""/></li>
</ul>

body {
  background-color: #ccc;
}

.container {
  width: 500px;
  margin: 0 auto;
}

img {
  margin: 0 auto;
}


$(document).ready(function(){
  $('.container').slick({
    dots: true,
    centerMode: true,
    arrows: true,
    slidesToShow: 1  
  });  
});

範例

  • 官網上有很多範例喔，而且官網也是用Github Page做的唷！

參考