光滑的滑块无法正常工作

Question

我以前使用过光滑的滑块，但现在我不知道会导致这种骚动的原因。 我想念什么吗？我遵循了光滑滑块和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>