Question

我正在制作一个新闻文章页面，其中还有一个图库。我在图库中使用slick slider作为缩略图。图库中的每个图片都有自己的网址，用于广告查看目的（不是很好，但我无能为力），例如our-url.com/category/articlewithgallery/1,2或3等...

我正在使用这样的响应断点：

$('.gallery-thumbs').slick({
  slidesToShow: 5, slidesToScroll: 5, dots: false, infinite: false, speed: 300,
  responsive: [ { breakpoint: 1024, settings: { slidesToShow: 5, slidesToScroll: 5 } },
  { breakpoint: 600, settings: { slidesToShow: 4, slidesToScroll: 4 } },
  { breakpoint: 438, settings: { slidesToShow: 3, slidesToScroll: 3 } },
  { breakpoint: 270, settings: { slidesToShow: 2, slidesToScroll: 2 } } ]
} );

这很好用。但是因为我们有很多网址，我希望缩略图能够从当前加载的图像开始。我可以通过添加以下内容来实现这一目标：

$('.gallery-thumbs').slickGoTo(parseInt(cur_pic));

缩略图从正确的位置开始，但它打破了旋转木马。例如，我不能再向后滚动它了。我可以拖动并看到该方向上有更多缩略图，但它只是反弹回（新）起始位置。此外，如果我们在最后一个＆＃34;幻灯片＆＃34;，它或者根本不显示它们，或者在所有缩略图后添加空格。

我想也许是因为我没有使用光滑的滑块＆＃34; onInit＆＃34;函数和它搞砸了，因为我们告诉它在初始化之前转到这张幻灯片或其他东西。我已经尝试了各种各样的东西，并且无法获得任何onInit：function（）工作。

可能是因为我在javascript上非常糟糕。

Answer 1

它正在发挥作用。代码：$('.firstDiv').slickGoTo(4);

请参阅以下示例

http://jsfiddle.net/9fnmegqb/

从版本1.4+开始：$('.firstDiv').slick('slickGoTo', 4)

Answer 2

从版本1.4开始，调用操作的方法已经改变。

slickGoTo()函数的等效代码行是$('#slider_selector_id').slick('slickGoTo', slide_number);

（其中#slick_selector_id是滑块的ID，slide_number是所需幻灯片索引的整数）

（根据Alexandre Bourlier建议回复another answer here）

Answer 3

我找到的解决方案是将无限变为真

$('.gallery-thumbs').slick({
  slidesToShow: 5, slidesToScroll: 5, dots: false, infinite: true, speed: 300, responsive: 
  [ 
    { breakpoint: 1024, settings: { slidesToShow: 5, slidesToScroll: 5 } },
    { breakpoint: 600, settings: { slidesToShow: 4, slidesToScroll: 4 } },
    { breakpoint: 438, settings: { slidesToShow: 3, slidesToScroll: 3 } },
    { breakpoint: 270, settings: { slidesToShow: 2, slidesToScroll: 2 } } 
  ] 
});

我知道该帖子已有3年历史，但我不得不发布解决方案。

Slick Slider slickGoTo方法打破了旋转木马

3 个答案: