Slick: Slider content wont snap back when resizing browser (responsive)

[Mattajames]

HI Ken,

Great Slider, and thanks for sharing :-) although i have some issues that i hope you can help me with.

Im using the Slick-Slider as part of a responsive website. the problem is when you resize the browser the content panels in the slider will not swipe and gets stuck (this could also happen when going between portrait and landscape on a device). The ideal solution would be for the content panels to reset when resizing the browser to full width again. Do you have a solution for this?

Also I would like to centre all the content panels without having it in "Centre mode". is there a setting for this?

Many thanks in advance
Matt

[Mattajames]

Hi Ken,

I have attached my code to illustrate my issue. Was a bit difficult to explain above :-)

If you resize the browser to phone size and swipe to slide 5. Then resize the browser to full width.

You will see that you can no longer see slide 5 and you cant swipe any more.

Please see code here:
https://www.dropbox.com/s/0jy3x9rbqh2o982/index%202.html.zip

Many thanks in advance
Matt

[kenwheeler]

Where are you seeing this

[Mattajames]

I have implimented the code twice and get the same effect. I attached a working example (with issue). If you use the slider and drag the slides to slide 5. Then resize your browser to a mobile size and the open it again the slider gets stuck.

[kenwheeler]

What browser, what OS, what device.

[Mattajames]

Only tested on chrome & firefox on mac and PC and problem persists in all.
Thanks for looking into this
Matt

[kenwheeler]

Have you tested with the latest codebase ?

[Mattajames]

Was latest when I posted first

[Mattajames]

Have you managed to replicate the issue Ken?

[kenwheeler]

I have not, but I'm still trying, I remember seeing it happen early on

[Mattajames]

OK Cool thanks Ken, let me know if I can help....

[kenwheeler]

Can you stick a console log in the check responsive method when you are seeing it to see if it is getting called?

[Mattajames]

Im away from my computer at the moment Ken, my files are here: https://www.dropbox.com/s/0jy3x9rbqh2o982/index%202.html.zip

or ill get back to you Monday if thats OK. Sorry but away for the weekend till Monday.

[Mattajames]

Hi Ken sorry for the late reply,
I have attached a new file and put the console.log as you requested.
https://www.dropbox.com/s/0jy3x9rbqh2o982/index%202.html.zip?dl=0

In the html you will find comments (including the console.log). all lib are up to date and I still see the issue.

Any help will be well received.

Thanks in advance
Matt

[Mattajames]

Hi ken whats your thoughts on this?

[kenwheeler]

@Mattajames it's a tricky one, I can reproduce here and there, but still getting down to the bottom of it.

[Mattajames]

Ok thanks Ken well appreciated. I think it would be a problem on devices when changing orientation.

[Mattajames]

Hi Ken, have you any news on this bug.

[kenwheeler]

I've only been able to reproduce in Chrome, and it only happens for the last breakpoint, so I"m not sure if its a browser thing or a slick.checkResponsive thing. Still investigating, but in the meantime, here is a fun thing you can do. So when I create slick on an element, I store an instance of it on the element itself. So you can say $('my-element')0, and then access the entire slick API right there. So you could bind an event handler to orientation change and then say $('my-element')[0].slick.setPosition() or $('my-element')[0].slick.refresh().

[gbrlsepulveda]

Hey, I had the same issue. In my case I found a workaround to fix it. Something like this:

$(window).resize(function() {
    var current = $('.my-slider').slickCurrentSlide();
    $('.my-slider').slickGoTo(current);
});

[srussking]

None of the above fixes were working for me. I am only getting this error on the non infinite carousels when the current slide is one of the last few showing.

This is mostly working for me:

$(window).resize(function(){
   var current = $('.my-slider').slickCurrentSlide();
   var numSlidesShowing = $('.my-slider').slickGetOption("slidesToShow");
   var totalSlides = $('.my-slider')[0].slick.slideCount
   var infinite = $('.my-slider').slickGetOption("infinite");
   var currentInDangerZone = totalSlides - 1 <= current + (numSlidesShowing - 2)
   if(!infinite && currentInDangerZone && (numSlidesShowing > 1)){
     $('.my-slider').slickGoTo(totalSlides - numSlidesShowing);
     $('.my-slider')[0].slick.updateArrows();
   }
 });

The only thing I don't like about it is that the slide index is changed, so resizing back down focuses on a lower slide. Also the arrows don't seem to update the disabled class properly after this. Even with the extra call to arrowUpdate. But maybe this can help point you in the right direction.

[srussking]

Found that this still wasn't working as the number of slides showing was not getting updated in time for this resize function. Wrapped it in a setTimeout at 500ms and that seems to work though it does make me feel uncomfortable...

[mdmoreau]

I think I was able to patch the carousel portion of the problem by changing the following in slick.js, but I've only tested this on one instance of the slider.

    Slick.prototype.refresh = function() {

        var _ = this,
            currentSlide = _.currentSlide,
            slideCount = _.slideCount,
            slidesToShow = _.options.slidesToShow;

        _.destroy();

        $.extend(_, _.initials);

        if (currentSlide > slideCount - slidesToShow) {
            currentSlide = slideCount - slidesToShow;
        }

        _.currentSlide = currentSlide;
        _.init();

    };

This just makes sure that the active slide gets set correctly to keep enough items in view when the slidesToShow value changes. The dots seem to update correctly already for me, but I'm looking into a fix for the arrow disabled classes now.

[mdmoreau]

Adjusted to not change how things work for infinite carousels and update the arrows correctly. @srussking and @Mattajames would you guys mind trying this out and letting me know if it fixes the problem? If so I'll create a PR.

    Slick.prototype.refresh = function() {

        var _ = this,
            currentSlide = _.currentSlide,
            slideCount = _.slideCount,
            slidesToShow = _.options.slidesToShow;

        _.destroy();

        $.extend(_, _.initials);

        if (_.options.infinite !== true && currentSlide > slideCount - slidesToShow) {
            currentSlide = slideCount - slidesToShow;
        }

        _.currentSlide = currentSlide;
        _.init();
        _.updateArrows();

    };

[srussking]

Tried it out. This creates new problems but it does snap to the correct slide on resize.

1. New problem - Center mode is messed up pretty hard. Here's with the new refresh fn.
   

With the original slick

1. New problem - After resize the carousel is in the correct position, but the prev arrow no longer functions, and attempts to swipe right show the slides, then snap back to the current index...

-R

[mdmoreau]

Okay cool - thanks for trying it out. I hadn't tried it with center mode yet, so I'll give that a shot.

[srussking]

Hmmm... I think this may be a different version of the slider than I was using. Looks like some code must have changed there between when I pulled it down a couple weeks ago and introduced some problems.

I think these are more related to slick version 1.3.13 than your code.

unfortunately the other one I have is minified, so imma need to do some prettifying I think. Gimme a sec.

-R

[mdmoreau]

Yeah all my change really does is pull back the active slide index so it won't be past the limit (total slides - slides showing), but I might be missing something.

[srussking]

Ok, trying that code into my old slick.min seems to resolve the issue. Only thing I noticed that was weird was that the previous arrow seem to activate on mouse over instead of on click. Just the first time after resizing. Could be a fluky browser bug though. Seems odd.

[srussking]

Hmmm happens on mac chrome 38.0.2125.111 and firefox 32.0.3, seems more like a bug in update arrows or something though imo. Even so much better than the previous situation. Thanks!

[srussking]

Well didn't happen on one of the other carousels on the site. I'm gonna call this something crazy going on in our environment and slowly walk away. Thanks again!

[kenwheeler]

@srussking The center mode defaulting to 3 is my bad, thats scheduled for fix this weekend

[kenwheeler]

Just a note fellas, its nearly impossible for me to debug this without jsFiddles.

[mdmoreau]

The current version runs slightly different from my version (1.3.11), but the bug is there, although a bit different.

http://jsfiddle.net/knzf650n/1/

1. Start at the smallest viewport
2. Scroll to item 7, the last item
3. Resize the window up to the next breakpoint
4. Left arrow is disabled, right enabled, and the slideshow won't work while dragging either

[mdmoreau]

http://jsfiddle.net/knzf650n/2/

Here's another fiddle with slick.js added inline with the fix from https://github.com/kenwheeler/slick/pull/742 added in.

[kenwheeler]

Re #742 , shouldn't dots get updated too?

[mdmoreau]

It's weird, but in everything I've tested the dots have always updated correctly - it's only been the arrows that don't seem to get the disabled classes added/removed. They still seem to function, but the classes don't get updated until you reach either end of the slideshow.

Here's another fiddle with the dots added in - sorry I forgot those in the others.
http://jsfiddle.net/knzf650n/4/

[desandro]

You might want to try Flickity. Flickity uses your own CSS to handle sizing, so it doesn't run into any snags on window resize or with media queries. See media query demo: http://codepen.io/desandro/pen/azqbGV

[rsarrais]

Hail folks, this code will probably solve most of your issues wtih snapback and showing all items on resize up (could be easily adapted to all kinds of resize, using "windowWidth" var for tests):

function resizeWidthOnly(a,b) {  
  var c = [window.innerWidth];
  return onresize = function() {
    var d = window.innerWidth,
        e = c.length;
    c.push(d);
    if(c[e]!==c[e-1]){
      clearTimeout(b);
      b = setTimeout(a, 250);
    } 
  }, a;
}
/*fix slick slider snap back on resize*/
resizeWidthOnly(function() {    
    var windowWidth = $(window).width();
    if (windowWidth >= 980) {
        $(".my-slider > .slick-list > .slick-track").css("transform", "translate3d(0px, 0px, 0px)");
    }
});

[MikeHarrison]

@rsarrais that fix worked for me thanks

[jmilne]

@rsarrais also solved my problem, thanks

[cheehung89]

@rsarrais ,can i know where i should put that code inside my slick.js file? Thanks... i really need to solve this.

[cheehung89]

anyone can tell me where to put the function resizeWidthOnly(...) code?

[cheehung89]

@jmilne , @MikeHarrison can i know where you put the function resizeWidthOnly code?

[MikeHarrison]

@cheehung89 just add it to your script file after your slick initialize

[cheehung89]

@MikeHarrison if you can provide some sample code it will help me many... thanks btw.

[subtirelumihail]

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

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

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

[dangelojesse]

Here is how I solved the problem.

$(element).on('setPosition', function(event, slick, currentSlide, nextSlide) {
  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)');
  }
});

[andershopkins]

@dangelojesse this solution works pretty well. Thanks for the tip.

[qim]

Hi

SOLVED!

[xkgoldxsite]

in google chrome the same problems and fixes are not helpd

[simeydotme]

This is pretty old and following the conversation seems no secure resolution.
Please open a new issue with the fiddle from Contributing.markdown file if you think it's still present.

[raulneto]

@rsarrais worked for me thanks