轮播 slick.js : 'getSlick' 个未定义

Question

我正在使用 Slick.js 连接 2 个轮播，并且它们已同步。 Slick 在“Slider Syncing”部分提供了可能性 slick.js website

但是当我使用它时，它不起作用，出现错误： 未捕获类型错误：无法读取未定义的属性 'getSlick'

我的代码是：

$('#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 Example

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

干杯

轮播 slick.js : 'getSlick' 个未定义

Carousels slick.js : 'getSlick' of undefined

javascript

jquery

slick.js