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

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

Answer 2

尝试这种方法。

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

光滑的滑块移动响应能力

2 个答案: