光滑的滑塊無法正常工作

Question

我以前使用過光滑的滑塊，但現在我不知道是什么導致了這種騷動。 我錯過了什么嗎？ 我已經按照 slick slider 和 github 上的說明進行操作，我很困惑。

 //JS here $('.slider').slick({ arrows:true, autoplaySpeed:1000 });

 /* Style here */ .container{ max-width:1200px; margin:0 auto; }

 <!-- Script --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script> <!-- Html --> <div class="container"> <div class="slider"> <div class="slides"> <img src="Picture4" alt=""> </div> <div class="slides"> <img src="Picture3" alt=""> </div> <div class="slides"> <img src="Picture2" alt=""> </div> <div class="slides"> <img src="Picture1" alt=""> </div> </div> </div>

Answer 1

分析您的代碼后，我注意到缺少流暢的 css 導入。

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css

我將您的示例留在下面的 CSS 導入中。

 $('.slider').slick({ arrows:true, autoplaySpeed:1000 });

 .container{ max-width:1200px; margin:0 auto; } .slider{ display:flex; .slides{ display:flex; justify-content:center; } }

 <!-- this line is missing --> <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script> <div class="container"> <div class="slider"> <div class="slides"> <img src="http://via.placeholder.com/500x500" alt=""> </div> <div class="slides"> <img src="http://via.placeholder.com/500x500" alt=""> </div> <div class="slides"> <img src="http://via.placeholder.com/500x500" alt=""> </div> <div class="slides"> <img src="http://via.placeholder.com/500x500" alt=""> </div> </div> </div>