kenwheeler / slick

the last carousel you'll ever need
kenwheeler.github.io/slick
MIT License
28.54k stars 5.89k forks source link

Responsive unslick issue #4002

Open AmirHosseinKarimi opened 4 years ago

AmirHosseinKarimi commented 4 years ago

short description of the bug / issue, provide more detail below.

When set responsive unslick option it works when screen size reducing, But when screen size increase from unslick to slick slider this does not apply.

Sorry I have not enoght time to produce it on JsFiddle, But I paste the code blow:

$(".products").slick({
        rtl: true,
        dots: true,
        arrows: true,
        infinite: false,
        slidesToShow: 6,
        slidesToScroll: 2,
        appendDots: $this.find(".slider-dots-wrapper"),
        nextArrow: $this.find(".next-arrow"),
        prevArrow: $this.find(".prev-arrow"),
        responsive: [
          {
            breakpoint: 1740,
            settings: {
              slidesToShow: 4,
              slidesToScroll: 2,
            },
          },
          {
            breakpoint: 1200,
            settings: {
              slidesToShow: 3,
              slidesToScroll: 2,
            },
          },
          {
            breakpoint: 992,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 2,
            },
          },
          {
            breakpoint: 768,
            settings: "unslick",
          },
        ],
      });
Ifnir commented 4 years ago

I'm having this issue as well.

Whenever I start in lower resolution it works, right until I hit unslick breakpoint, then it becomes unresponsive. Also If I start in unslick breakpoint, the nit still unresponsive.

AmirHosseinKarimi commented 4 years ago

@Ifnir I have fixed it by a customer event listener to window size and reinitialize Slick again after the browser window size is greater than unslick specified size.

Ifnir commented 4 years ago

How so?

I tried it, but removes the slick instead?