javascript - Slick Slider slickGoTo 方法打破轮播

Question

我正在处理一个新闻文章页面，该页面也有一个图片库。我正在使用 slick slider对于图库中的缩略图。图库中的每张图片都有自己的 url，用于广告查看目的(不是很好，但我无能为力)，例如 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 } } ]
} );

这工作正常。但是因为我们有很多 url，我希望缩略图从当前加载的图像开始。我可以通过添加以下内容来完成此操作:

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

缩略图从正确的位置开始，但它破坏了轮播。例如，我再也不能向后滚动了。我可以拖动并看到那个方向有更多缩略图，但它只是弹回到(新的)起始位置。此外，如果我们在最后一张“幻灯片”上，它要么根本不显示它们，要么在所有缩略图之后添加空白区域。

我想这可能是因为我没有使用灵活的 slider “onInit”功能，它搞砸了，因为我们告诉它在初始化之前转到这张幻灯片或其他什么。我已经尝试了各种东西，但无法让任何 onInit: function() 东西起作用。

可能是因为我不擅长 javascript。

Answer 1

它正在工作。代码:$('.firstDiv').slickGoTo(4);

请看下面的例子

http://jsfiddle.net/9fnmegqb/

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