设置 initialSlide 后，光滑的滑块不起作用

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({ 无限：假，幻灯片显示：2，幻灯片滚动：1，初始幻灯片：3 })

你有5张幻灯片，但是你指定的初始一张是4张，同时显示3张。但是初始1是幻灯片2，初始4是幻灯片5，但是slidesToShow: 3。滑块没有没有多余的幻灯片可以展示

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

Answer 2

您已将初始幻灯片设置为 4（即索引 4 是幻灯片 #5）- 这是轮播中的最后一张幻灯片。问题是您的旋转木马正在显示 3 张幻灯片，因此您希望初始幻灯片为 #3，其索引为：2:

（幻灯片总数 - 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>

Answer 3

自 2014 年起，initialSlide 无法在响应式配置中运行，因此可以使用

$('.selector').slick('slickGoTo', 5);

设置 initialSlide 后，光滑的滑块不起作用

Slick slider not working when initialSlide is set

javascript

html

css

slick.js