javascript - Slick Slider 移动响应能力

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

标签： javascriptjquerycsswordpressslick.js

Answer 1

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