旋转木马slick.js:'getSlick'的未定义

Carousels slick.js : 'getSlick' of undefined

本文关键字:未定义 getSlick slick 旋转木马 js      更新时间:2023-09-26

我正在使用Slick.js使2个caroussel连接,并且它们是同步的。Slick在"滑块同步"部分提供了这种可能性slick.js网站

但当我使用它时,它不起作用,我得到了一个错误:未捕获类型错误:无法读取未定义的属性"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
});

伙计们,你们能帮我吗?

EDIT:JSFIDDLE示例

问题是您对同步滑块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

干杯