光滑的滑块移动响应

Question

我正尝试在 https://bhr-caterers.nk-creative.com/

上使用 Slick 创建响应式滑块

在移动设备上，我只想显示一张幻灯片，但显示了 3 张。我正在尝试使用 Slick 滑块的内置响应选项，但我认为它不起作用。

这是我的滑块 JS。我做错了什么吗？我已经尝试禁用所有 CSS，但我仍然遇到这个问题。

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
      }
    }
   ]
  });
});

Answer 1

试试这个方法。

$('.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
  }
}]});

Answer 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 complete slide instead of 3 */
      slidesToScroll: 1
      }
    }
   ]
  });
});

光滑的滑块移动响应

Slick Slider Mobile Responsiveness

javascript

css

wordpress

jquery

slick.js