Question

jQuery轮播插件slickslider已用于显示项目中的滑块

$(".regular").slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1
});

现在，我想借助jquery slidesToShow函数根据window width自定义resize选项。如何在以上功能中插入以下要求。我尝试插入，但不起作用，其他jquery函数也停止了。

$(window).resize(function() {
  if ($(window).width() < 960) {
    slidesToShow: 3,
  }
  else {
    slidesToShow: 2,
 }
});

Answer 1

Slick已具有响应式Web设计支持。不需要其他大小调整侦听器。

对于您的情况，这是您可能要使用的方式：

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

通过这种方式，您的代码中有语法错误。通常，在使用该语言之前先学习一下是个好主意。

Answer 2

您不仅可以将数据转储到javascript，还需要采取措施来实现目标。以下可能有效-我不知道光滑的插件..

$(window).resize(function() {
  if ($(window).width() < 960) {
    $(".regular").slick({
      infinite: true,
      slidesToShow: 3,
      slidesToScroll: 1
    });
  }
  else {
    $(".regular").slick({
      infinite: true,
      slidesToShow: 2,
      slidesToScroll: 1
    });
 }
});

Answer 3

也许像这样：

function slickslider_init(elements_to_show) {
    $(".regular").slick({
      infinite: true,
      slidesToShow: elements_to_show,
      slidesToScroll: 1
    });
}

$(document).ready(function() {
   if ($(window).width() < 960) {
      slickslider_init(3),
   } else {
      slickslider_init(2),
   }
});

$(window).resize(function() {
  if ($(window).width() < 960) {
    slickslider_init(3),
  }
  else {
    slickslider_init(2),
 }
});

如何使用jQuery窗口调整大小事件更改元素

3 个答案: