Slick: Responsive / browser resize issue

[rorysmorris]

I have mocked up this problem/bug into a jsfiddle so you can see what I mean.

First, resize the window so the arrows/dots navigation appears. Use them, so you are no longer on "slide 1". Now, resize the window back up so the arrows/dots navigation disappears. The slider should reset itself back to slide 1, but it doesn't.

Example: http://jsfiddle.net/7vh2j6k8/
Video of problem: https://www.youtube.com/watch?v=aBOoN6efcyc

[kitestudio]

+1

[bagusflyer]

Same question here.

[cheehung89]

same question here but no one able to answer...

[rorysmorris]

Would be good to get a fix for this.

Cheers

[subtirelumihail]

This is how I managed to fix it, hope it helps

const $slider = $('.your-element'); // my slider

$(window).resize(function() {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    $slider.slick('slickGoTo', 0);
  }, 100);
});

also this should be merged with #429

[cheehung89]

@subtirelumihail can i know where should i put this code? just direct copy the same code like your posted? or i need add function myself?

[subtirelumihail]

@cheehung89 just copy/paste the code after you initialise your carousel and change .your-element with your slick carousel class or id

[subtirelumihail]

This is the solution in es5

var $slider = $('.your-element'); // my slider

$(window).resize(function() {
  clearTimeout(timeout);
  timeout = setTimeout(function() {
    $slider.slick('slickGoTo', 0);
  }, 100);
});

[dangelojesse]

Here is how I decided to go about fixing the issue.

$(element).on('setPosition', function(slick) {
  var slidesShown = $(element).slick('slickGetOption', 'slidesToShow');
  var numberOfSlides = $(element).find('.slick-slide').length;

  if (slidesShown === numberOfSlides) {
    $(element).find('.slick-track').css('transform', 'translate3d(0px, 0px, 0px)');
  }
});

http://jsfiddle.net/a0qetnbx/

[jnachtigall]

I simply _destroy_ and _recreate_ the slick gallery as a workaround for this bug:

$window.resizeDimension('width',
  _.debounce(function() {
    $gallery.slick('unslick');
    $gallery.slick({
      infinite: true,
      slidesToShow: 3,
      slidesToScroll: 3,
      arrows: false,
      dots: true,
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2
          }
        },
        {
          breakpoint: 767,
          settings: 'unslick'
        }
      ]
    });      
  }, 300)
);
`

[simeydotme]

Fixed on Master:
http://jsfiddle.net/simeydotme/w67erjrk/

https://github.com/kenwheeler/slick/pull/2068 <-- commit that fixes.

[gumennii]

Thank you for fixing this