旋转木马slick.js ：未定义的“getSlick”

Question

我将使用Slick.js制作2个连接的走马灯，并使它们同步。 在“滑块同步 ”部分，Slick提供了这种可能性。 slick.js网站 但是当我使用它时，它无法正常工作，我会收到以下错误： Uncaught TypeError: Cannot read property 'getSlick' of undefined 我的代码如下：

$('#page-gravure .sliders .slides-show ul').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slides'
});

$('#page-gravure .sliders .slides ul').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slides-show',
  centerMode: true,
  focusOnSelect: true
});

请大家，你们能帮我吗？

编辑: JSFIDDLE 示例

- Jean-Claude Pratt-Delzenne

---

你能否提供一个最小的工作示例，例如使用jsfiddle？=] - Relequestual

在他们的网站上有一个，位于主页中间的“Slider Syncing”部分：http://kenwheeler.github.io/slick/。 - Jean-Claude Pratt-Delzenne

一个最小化的工作示例，展示你的代码并引起问题。这样做可以让验证问题解决方案变得尽可能简单。 - Relequestual

好的，我会添加并完成这件事。 - Jean-Claude Pratt-Delzenne

Jsfiddle已添加到我的问题帖子中。 - Jean-Claude Pratt-Delzenne

Answer 1

问题在于你同步滑块的引用asNavFor: ...都是错误的。引用应该与构建每个幻灯片的方式相同。因此，您的构造函数应如下所示：

$('#page-gravure .sliders .slides-show ul').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '#page-gravure .sliders .slides ul'
});

$('#page-gravure .sliders .slides ul').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '#page-gravure .sliders .slides-show ul',
  centerMode: true,
  focusOnSelect: true
});

这是一个可用的JSFiddle示例。

祝好！

- Asaf David