Update docs or change responsive:'unslick'

I wish I had noticed #994 earlier because the way responsive:unslick works now isn’t very clear from the documentation: “Set settings to “unslick” instead of an object to disable slick at a given breakpoint.”

To me that sounds like it’ll be disabled at that breakpoint, not that slick will be completely removed and not come back at any other breakpoints. I want Slick on bigger screens, but that doesn’t mean I want things to break if the user flips the device or resizes the browser back and forth. I would guess that this is what #542 actually meant?

So now it means I have to write some resize-event-logic to bring Slick back, which would be duplicating what Slick does to disappear.

Some suggestions:

• Update the docs to make the current behaviour clearer.
• Implement the current functionality as some widthTreshold setting instead, because the responsive object has been states Slick would flip through depending on screen/other width but unslick breaks that logic.
• Change it so that we can have a disabled state instead, where Slick continues to flip through the responsive states whenever screen/other width changes.

[paulcripps]

I similar issues as @Dechowmedia

I want to ‘unslick’ for smaller devices and switch it back on if the screen is larger. So tablet portrait = no slick, tablet landscape = slick on…

A rough working example is below:

  $('#wineSlider').slick({
        infinite: true,
        slidesToShow: 2,
        slidesToScroll: 1,
        prevArrow: $('.prevArrow'),
        nextArrow: $('.nextArrow'),
        responsive: [
            {
                breakpoint: 1280,
                settings: "slick"
            },
            {
                breakpoint: 800,
                settings: "unslick"
            }
            ]
    });

So for screens below 800 we turn slick off, greater is should be on.

This works when I scale the browser down or switch a tablet to portrait but when we scale up or change tablet to landscape slick does not kick back in… unless I re-load the page?

[itsmattsoria]

Hey @seriema, I’m on the same page. I was wondering if you’ve got a decent solution to this problem working. I’ve got something working right now, but it seems like it could be simpler:

function runSlider() {
  if ($(window).width() > 800 ) {
    $('.slider').slick({
      // options
    });
  } else {
    $('.slider').unslick();
  }
}

runSlider();

var r;

$(window).resize(function() {
    clearTimeout(r);
    r = setTimeout(runSlider, 500);
});

If you’ve got a better solution working I’d love to see it! 😃