Slick: Update docs or change responsive:'unslick'

[seriema]

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.

[poopsplat]

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! :)

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

[paulcripps]

@poopsplat theory works a treat for me, thanks @poopsplat

[poopsplat]

@paulcripps glad it worked!

[seriema]

@poopsplat sorry I forgot to answer. We were already using enquire.js on my project so I just added a simple thing that's similar to your solution. Meaning I don't use the unslick breakpoint in Slick.

[szimek]

+1 I'd expect that switching between portrait/landscape modes would turn slick off/on.

[tinabillinger]

I found a simple solution for this problem:

Instead of 'unslicking' for small screen sizes, I just reduce the number of slides to 1, and use CSS media queries to adjust the layout. That way the Slick instance is not destroyed, and it still works in case the user resizes the browser, or switches to landscape.

Since the Slick markup uses inline styles added by JS, it's a bit tricky to override via stylesheet file, here's how:

.slick-track[style] {
    width: 100% !important;
    transform: none !important;
}
.slick-slide[style] {
    display: block !important;
}

[poopsplat]

@bloooming smart! Why didn't I think of that? Thanks!

[seriema]

Smart! But why do we have to do these hacks/workarounds?.. Can't we change how Slick behaves?

[kenwheeler]

@seriema do you have a proposal on how to re slick something that is unslicked?

[kenwheeler]

The way I see it, you would have to attach a responsive listener to the window and keep track of all slick instances and their states, and reslick them at certain breakpoints

[seriema]

Maybe you don't have to unslick it completely. Just shut it "off"? I.e. remove slick, but not destroy the actual instance (so breakpoint handling doesn't disappear).

Or alternatively, like you said, have one global responsive listener. You might want that anyway, as a minor performance improvement.

I'd like to do a PR, but seeing my calendar I don't want to promise anything. =/

[annorax]

+1 for changing this to an enabled/disabled setting that can be passed to each breakpoint (including the "top" breakpoint, i.e. anything larger than the resolution specified in the largest breakpoint), which is absent from the current API (no way to have slick active only for mobile, for example).

[szimek]

@seriema Thanks for suggesting enquire.js! We'd switched to it instead of using unslick and it works great.

[stratboy]

+1

[devolkpl]

It seems that still the best solution is not trying to unslick that crap. Just use media queries and some !important to make it look good...

[PaintingSilence]

this worked for me like a charm by another user on github (https://github.com/kenwheeler/slick/issues/2123)

(no idea how to insert code tags. feeling a bit helpless haha)

const settings = {
// default settings
responsive: [
{
breakpoint: 900,
settings: { slidesToShow: 3 }
},
{
breakpoint: 600,
settings: { slidesToShow: 2 }
},
{
breakpoint: 420,
settings: "unslick"
}
]
};

const sl = $('.slider').slick(settings);

$(window).on('resize', function() {
if( $(window).width() > 420 && !sl.hasClass('slick-initialized')) {
$('.slider').slick(settings);
}
});