CODEWITHSUNDEEP
htmljquerycssresponsiveslick.js
Alexei Petrenko
Alexei Petrenko

Reputation: 93

Responsive break point is not working for Slick slideshow

My slick slider's responsive breakpoints are not working. I tried a lot of solutions, but nothing helped me. Maybe I have a problem with HTML structure or something.

This is my demo - https://jsfiddle.net/eax5tu4s/

$(".slider").slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    variableWidth: true,
    responsive:[
      {
        breakpoint: 1200,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 1
        }
      },
    ]
  });

Upvotes: 0

Views: 3371

Answers (2)

joshmoto
joshmoto

Reputation: 5088

+1 @Ed Lucas for pointing the variable width issue. Bang on! 👍🏼

Also worth noting with slicks responsive breakpoints, by default is desktop first. So your 1200 breakpoint settings is everything below 1200 window width, which is kinda backwards if you are building with a framework which is mobile first.

You can flip this using slicks mobileFirst option set to true (default false) to reverse the breakpoints.

For example you could define your frameworks breakpoints as an object...

const breakpoint = {
  // Small screen / phone
  sm: 576,
  // Medium screen / tablet
  md: 768,
  // Large screen / desktop
  lg: 992,
  // Extra large screen / wide desktop
  xl: 1200
};

Then define mobileFirst: true in your slick options and configure your slick options mobile first to desktop...

$('.slider').slick({
  mobileFirst: true,
  infinite: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  responsive: [{
      breakpoint: breakpoint.md,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1
      }
    },
    {
      breakpoint: breakpoint.xl,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 1
      }
    }
  ]
});

So each slick breakpoint setting is everything up rather than down, and your initial slick options are mobile first 🤙🏼

Upvotes: 2

Ed Lucas
Ed Lucas

Reputation: 7335

I was able to get this to work by removing the variableWidth: true setting, since it allows each slide to grow with its contents.

$(".slider").slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    responsive:[
      {
        breakpoint: 1200,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 1
        }
      },
    ]
  });

I also added the Slick CSS files to your JSFiddle to make this work. I reduced the breakpoint in order to test it in the smaller window of the fiddle: https://jsfiddle.net/ga6w1zmo/

Upvotes: 2

Related Questions