I am trying to create a responsive slider using Slick on /

On mobile, I only want one slide to show, but 3 are showing. I am trying to use Slick slider's built-in responsive options, but I don't think it is working.

Here is my JS for the slider. Is there something I am doing wrong? I have tried disabling all of my CSS and I am still having this issue.

jQuery(document).ready(function($){


//Sliders//
    $('.slider').slick({
    lazyLoad: 'onDemand',
    centerMode: true,
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: true,
    //autoplay: true,
    autoplaySpeed: 6000,
    responsive: [
    {
      breakpoint: 768,
      settings: {
      slidesToShow: 1,
      slidesToScroll: 1
      }
    }
   ]
  });
});

I am trying to create a responsive slider using Slick on https://bhr-caterers.nk-creative./

On mobile, I only want one slide to show, but 3 are showing. I am trying to use Slick slider's built-in responsive options, but I don't think it is working.

Here is my JS for the slider. Is there something I am doing wrong? I have tried disabling all of my CSS and I am still having this issue.

jQuery(document).ready(function($){


//Sliders//
    $('.slider').slick({
    lazyLoad: 'onDemand',
    centerMode: true,
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: true,
    //autoplay: true,
    autoplaySpeed: 6000,
    responsive: [
    {
      breakpoint: 768,
      settings: {
      slidesToShow: 1,
      slidesToScroll: 1
      }
    }
   ]
  });
});

• javascript
• jquery
• css
• wordpress
• slick.js

2 Answers 2

jQuery(document).ready(function($){
//Sliders//
    $('.slider').slick({
    lazyLoad: 'onDemand',
    centerMode: true,
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: true,
    //autoplay: true,
    autoplaySpeed: 6000,
    responsive: [
    {
      breakpoint: 768,
      settings: {
      slidesToShow: 1,
      centerMode: false, /* set centerMode to false to show plete slide instead of 3 */
      slidesToScroll: 1
      }
    }
   ]
  });
});

Try this approach.

$('.responsive').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 1, << set default for 1200px onward
slidesToScroll: 1,
responsive: [
{
  breakpoint: 1024, << for desktop width 992px
  settings: {
    slidesToShow: 3,
    slidesToScroll: 3,
    infinite: true,
    dots: true
  }
},
{
  breakpoint: 600, << for tablet
  settings: {
    slidesToShow: 2,
    slidesToScroll: 2
  }
},
{
  breakpoint: 480, << here's your mobile
  settings: {
    slidesToShow: 3,
    slidesToScroll: 3
  }
}]});