Question

我无法弄清楚为什么在设置initialSlide时幻灯片不滑动。我指的是https://kenwheeler.github.io/slick/上的文档，但无法弄清楚问题出在哪里。

$('.container').slick({
  initialSlide: 4,
  infinite: false,
  slidesToShow: 3,
  slidesToScroll: 1
})

* {
  box-sizing: border-box;
}

.container {
  width: 120px;
}

.slide {
  border: 1px solid red;
  width: 40px;
}

<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<div class="container">
  <div class="slide">1</div>
  <div class="slide">2</div>
  <div class="slide">3</div>
  <div class="slide">4</div>
  <div class="slide">5</div>
</div>

Answer 1

这是工作

$（'。container'）。slick（{ 无限：假， slidesToShow：2 slidesToScroll：1 初始幻灯片：3 }）

您有5张幻灯片，但您指定的第一张幻灯片是4张，同时显示3张。但第一张幻灯片是2张幻灯片，张数4张是5张幻灯片，但slidesToShow：3张。有任何备用幻灯片要显示

在我写答案时，它已经在评论中给出了

Answer 2

您已将初始幻灯片设置为4（即索引4是幻灯片＃5）-这是轮播中的最后一张幻灯片。问题是您的轮播展示了3张幻灯片，因此您希望初始幻灯片为索引为2的＃3：

（幻灯片总数-slidesToShow）= 5-3 = 2

如果您设置initialSlide: 2，则仍会显示最后3张幻灯片，但它还会设置“上一页”按钮转到幻灯片＃2，这将触发滚动。（“下一个”按钮当然不会有任何作用，因为您正在显示最后一张幻灯片并具有infinite:false）

工作示例：

$('.container').slick({
  initialSlide: 2,
  infinite: false,
  slidesToShow: 3,
  slidesToScroll: 1
})

* {
  box-sizing: border-box;
}

.container {
  width: 120px;
}

.slide {
  border: 1px solid red;
  width: 40px;
}

<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<div class="container">
  <div class="slide">1</div>
  <div class="slide">2</div>
  <div class="slide">3</div>
  <div class="slide">4</div>
  <div class="slide">5</div>
</div>

设置initialSlide时，滑动滑块不起作用

2 个答案: