Slick Slider slickGoTo 方法打破轮播答案

【问题标题】：Slick Slider slickGoTo method breaking the carouselSlick Slider slickGoTo 方法打破轮播
【发布时间】：2014-07-22 14:17:52
【问题描述】：

我正在开发一个新闻文章页面，该页面也有一个图片库。我正在使用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));

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

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

可能是因为我不擅长 javascript。

【问题讨论】：

一开始我很难让 Slick To 正常工作。我发现大多数问题是由于未封闭的标签和外部样式阻碍元素造成的。不知道这是否会有所帮助，但我会从那里开始。
@jimihenrik。 jsfiddle.net/9fnmegqb/389。你能帮我解决这个问题吗？最后一项丢失了，
抱歉，自此更改了项目，不再使用 slick。但是，是的，无论如何我从来没有让它工作，所以最终放弃了缩略图......

标签： javascript jquery slick.js

【解决方案1】：

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

请看下面的例子

http://jsfiddle.net/9fnmegqb/

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

【讨论】：

如果我不够清楚，我很抱歉。我的意思是我需要第二个（在您的示例中）滑块从预定义的缩略图开始。如果我设置它，它就不再起作用了。检查jsfiddle.net/9fnmegqb/5 并尝试在缩略图上向左导航到第一个。
是的，但我根本没有两个轮播。我只有必须从特定幻灯片开始的缩略图。而且，当您一次滚动的拇指数量与初始 slickGoTo() “落后”的拇指数量不同时，您就再也看不到它们了。这就是问题所在。我通常有 5 个缩略图，但希望缩略图滑块启动，因此当前打开的图片是滑块上的中间一张。所以问题和之前的 fiddle/5 （下滑块）完全一样。上面的滑块无关紧要/不存在。
快速说明：从 1.4 版开始，调用操作的方法发生了变化。从 1.4 开始，此答案的等效代码行将是：$('.firstDiv').slick('slickGoTo', 4)
@SimonShirley ：您应该将此作为西蒙的答案。我花了 30 分钟找到你的 cmets，我相信这是正确的答案。我知道它在他们的文档中（现在我知道了，我清楚地看到了）但我显然是匆匆忙忙地错过了它，不幸的是我相信许多开发者
@AlexandreBourlier 在提出问题的时候，这个答案是有效的。我看到它已经过编辑，所以我怀疑是否要从中做出答案，但正如您在编辑很久之后评论的那样，回答它可能是有意义的。

【解决方案2】：

从 1.4 版开始，调用动作的方法发生了变化。

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

（其中#slick_selector_id 是滑块的id，slide_number 是所需滑块索引的整数）

（来自Alexandre Bourlier 对another answer here 的回应建议的评论）

【讨论】：

【解决方案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 年的历史，但我必须发布一个解决方法。

【讨论】：

【解决方案4】：

有一点需要注意，如果你设置了速度，它会在跳转到随机幻灯片之前等待这个超时，这在页面加载时看起来很奇怪。要解决此问题，您可以将速度设置为 0，然后根据需要将其重置。

<script>
    $(document).ready(function () {
        var slider = $('#slider');
        var total = $('#slider img').length, // get the number of slides
            rand = Math.floor(Math.random() * total); // random number        
        slider.slick({
            dots: true,
            infinite: true,
            speed: 0,
            fade: true,
            cssEase: 'linear',
            autoplay: true,
            pauseOnDotsHover: true,
            autoplaySpeed: 7000
        });
        slider.slick('slickGoTo', rand);  // navigate to random slide;       
        slider.slick('slickSetOption', 'speed', 1000);
    });
</script>

【讨论】：