响应断点不适用于 Slick 幻灯片

Question

我灵活的滑块的响应断点不起作用。我尝试了很多解决方案，但没有任何帮助。也许我对 HTML 结构或其他问题有疑问。

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

Answer 1

我能够通过删除 variableWidth: true 设置来实现它，因为它允许每张幻灯片随其内容增长。

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

我还将 Slick CSS 文件添加到您的 JSFiddle 以完成这项工作。我减少了断点以便在 fiddle 的较小 window 中测试它： https://jsfiddle.net/ga6w1zmo/

Answer 2

+1 @Ed Lucas 指出可变宽度问题。砰！

同样值得注意的是 slicks 响应断点，默认情况下是桌面优先。因此，您的 1200 断点设置是 1200 window 宽度以下的所有内容，如果您使用移动优先的框架进行构建，这有点倒退。

您可以使用 slicks mobileFirst 选项设置为 true（默认 false）来反转断点。

例如，您可以将框架断点定义为一个对象...

const breakpoint = {
  // Small screen / phone
  sm: 576,
  // Medium screen / tablet
  md: 768,
  // Large screen / desktop
  lg: 992,
  // Extra large screen / wide desktop
  xl: 1200
};

然后在您的 slick 选项中定义 mobileFirst: true 并将您的 slick 选项配置为移动优先到桌面...

$('.slider').slick({
  mobileFirst: true,
  infinite: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  responsive: [{
      breakpoint: breakpoint.md,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1
      }
    },
    {
      breakpoint: breakpoint.xl,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 1
      }
    }
  ]
});

因此每个 slick 断点设置都是向上而不是向下，并且您的初始 slick 选项是移动优先

响应断点不适用于 Slick 幻灯片

Responsive break point is not working for Slick slideshow

html

css

jquery

slick.js

responsive