Slick Slider slickGoTo method breaking the carousel

Question

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.

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.

Could be because I'm quite bad at javascript.

Answer 1

Its is working. code: $('.firstDiv').slickGoTo(4);

Please see below example

http://jsfiddle.net/9fnmegqb/

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

Answer 2

As of version 1.4, the methods to invoke actions have changed.

The equivalent code line for the slickGoTo() function is $('#slider_selector_id').slick('slickGoTo', slide_number);

(where #slick_selector_id is the id for the slider, and slide_number is an integer of the slide index required)

(answer from comment as suggested by Alexandre Bourlier in response to the another answer here)

Answer 3

The solution that I have found working is to change the infinite to true

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

I know that the post is 3 years old, but I had to post a workaround solution.