CODEWITHSUNDEEP
javascriptjqueryslick.js
jimihenrik
jimihenrik

Reputation: 247

Slick Slider slickGoTo method breaking the carousel

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.

Upvotes: 14

Views: 59348

Answers (4)

estinamir
estinamir

Reputation: 503

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>

Upvotes: 1

gmetax
gmetax

Reputation: 3973

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.

Upvotes: 2

Simon Shirley
Simon Shirley

Reputation: 328

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)

Upvotes: 5

Praveen G
Praveen G

Reputation: 272

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)

Upvotes: 16

Related Questions