Tiny-slider: how can I disable / enable Tiny Slider at specific screen sizes?

[movationdesign]

Hi, is it possible to Enable / Disable the Tiny Slider at specific screen width / breakpoint?

I'm using a media query event handler to activate Tiny Slider at e.g. min-width: 700px. But I'm not sure how to disable it again. Say if the user turns their device from portrait to landscape, how to reload the event.

Short version: how can I disable / enable Tiny Slider at specific screen sizes?

Huge props for this Slider btw, by far the best I've found!

__Demo link/slider setting__: https://codepen.io/StrengthandFreedom/pen/LzGERE

_Tiny-slider version_: 2.1.8
_Browser name && version_: Chrome Latest

[ganlanyuan]

Hi,
To disable, you may use slider.destroy().
To enable, there is a function slider.sliderInit(), but it's private to tiny-slider right now, so you can't use.
I guess this is not the best solution. Let me consider this a little more.

BTY, why you want to enable/diaable the slider? For different layout?

[movationdesign]

It would be awesome if we could easily make it auto-detect screen width, and then turn on / off.

Yeah, I've built a Card Slider component similar to Airbnb’s. If you check their site you can see that they use 2 different slider types.

E.g. on the Experiences section (front page) notice that on small screens (max-width: 743px) they show 2 full cards, but then also a little bit of the 3rd card on the right.

From 744px and up, they enable a different slider type with arrow navigation, and the layout now displays only full cards.

I'm currently using your library for the bigger screens (768px and up), but I don't want it to take over my slider on small screens, which it does right now, without some workaround (like the CodePen I showed) and my solution isn't efficient.

[ganlanyuan]

Hi,
A new option disable was added in this branch.
You may test it with options like:

var slider = tns({
  // disable slider on small viewport
  disable: true,
  responsive: {
    600: {
      // enable slider on big viewport
      disable: false,
      item: 3
    }
  }
});

[movationdesign]

Thank you! Will report back if there are any problems!

[ganlanyuan]

Added in v2.2.0