Slick Slider slickGoTo方法打破了旋转木马 [英] Slick Slider slickGoTo method breaking the carousel

问题描述

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

I'm working on a news article page that also has a gallery of images. I'm using slick slider for the thumbnails on the gallery. Every image in the gallery has it's own url for ad view purposes (not nice but nothing I can do about it) like our-url.com/category/articlewithgallery/1, 2 or 3 etc...

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

I'm using responsive breakpoints like this:

$('.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 } } ]
} );

这个工作正常。但是因为我们有很多网址，所以我希望缩略图能够从当前加载的图像开始。我可以通过添加以下内容来实现此目的：

and this is working fine. But because we have many urls, I'd like the thumbnails to start on the current loaded image. I can accomplish this by adding this:

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

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

The thumbnails start at the correct location, but it breaks the carousel. For example I cant scroll it backwards at all anymore. I can drag and see that there are more thumbnails in that direction but it just bounces back to the (new) starting location. Also if we are on the last "slides", it either doesn't show them at all, or adds empty space after all the thumbnails.

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

I thought that maybe it's because I don't use the slick sliders "onInit" function and it messes it up because we tell it to go to this slide before initialization or something. I've tried all kinds of stuff and couldn't get any onInit: function() stuff to work.

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

Could be because I'm quite bad at javascript.

推荐答案

它正在运作。
代码： $（'。firstDiv'）。slickGoTo（4）;

请参阅下文示例

http://jsfiddle.net/9fnmegqb/

从版本1.4+开始： $（'。firstDiv'）。slick（'slickGoTo'，4）

And as of version 1.4+ : $('.firstDiv').slick('slickGoTo', 4)

这篇关于Slick Slider slickGoTo方法打破了旋转木马的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！