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.

Paryavi

I had a lot of trouble getting Slick To Work properly at first. I found that most of the problems were due to things like unclosed tags and outer styles impeeding on the elements. Don't know if this will help, but I'd start there. – Spartacus

@jimihenrik. jsfiddle.net/9fnmegqb/389. Can you help me on this.Last item is missing, – Schade

Sorry, changed projects since this and didn't go with slick anymore. But yeah I never got it to work anyway so just ended up dropping the thumbnails... – Paryavi

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)

Transponder

I'm sorry if I was not clear enough. I meant I need the second (in your example) slider to start at a predefined tuhmbnail. And if I set that, it doesn't work anymore. Check jsfiddle.net/9fnmegqb/5 And try to navigate left on the thumbnails to the first one. – Paryavi

Yeah, but I don't have two carousels at all. I only have thumbnails that have to start on a specific slide. And when the amount of thumbs you scroll at once is not even with the ones that "got left behind" with the initial slickGoTo() you can't see them any more. And that's the problem. I usually have 5 thumbnails, but would like the thumbnail slider to start so the current open picture is the middle one on the slider. So the problem is exactly as the previous fiddle/5 (the lower slider). The upper slider doesn't matter/exist. – Paryavi

I updated the fiddle to reflect more what I mean. jsfiddle.net/9fnmegqb/7 edit: strangely enough I just noticed that you can press the right arrow to skip back to the first image on the thumbnails even though the arrow seems to be greyed out. – Paryavi

Quick note: As of version 1.4, the methods to invoke actions have changed. The equivalent code line for this answer as of 1.4 woud be: $('.firstDiv').slick('slickGoTo', 4) – Iridic

@SimonShirley : You should make this an answer Simon. I took me 30 minutes to find your comments, and I believe this is the correct answer. I know it is in their documentation (now that I know, I see it obviously) but I clearly was rushing through it and missed it, as many devs will I believe unfortunately – Lew

@AlexandreBourlier At the time of the question, this answer was valid. I see that it has been edited so, am dubious about making an answer out of it, but as you commented long after the edit, it probably makes sense to answer it. – Iridic

Can anyone help me on this question. I have same scenario on this. "slickGoTo" is working. but after that if you click next button its going to next set of slides and disabling next button. So one last item is not visible. jsfiddle.net/9fnmegqb/389 – Schade

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)

Iridic

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.

Gladysglagolitic

Answer 4

One thing to note, if you have speed setting it will wait for this timeout before jumping to random slide, which looks strange on load of the page. To remedy this you can set speed to 0 and then reset it as needed.

<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>

Alber