光滑的滑块无法正常工作

Question

我以前使用过 slick slider，但现在我不知道是什么导致了这种骚动。我错过了什么吗？我已经按照 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>

光滑的滑块无法正常工作

Slick slider not working properly

javascript

slick.js