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

如何解决响应断点不适用于Slick幻灯片显示

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

这是我的演示-https://jsfiddle.net/eax5tu4s/

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

解决方法

我可以通过删除variableWidth: true设置来使其工作，因为它允许每张幻灯片随其内容一起增长。

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

我还将Slick CSS文件添加到您的JSFiddle中以使其工作。我减小了断点，以便在小提琴的较小窗口中对其进行测试： https://jsfiddle.net/ga6w1zmo/

,

+1 @Ed Lucas用于指出可变宽度问题。 ！ ??

同样值得注意的是，响应式断点默认情况下是台式机优先。因此，您的1200断点设置是小于1200窗口宽度的所有内容，如果您要使用首先移动的框架进行构建，则这倒退了。

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

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

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

然后在您的工具选项中定义mobileFirst: true，然后将您的工具选项配置为首先移动到桌面...

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

因此，每个平滑的断点设置都是将所有内容设置为向上而不是向下，并且您的初始平滑选项是移动优先的??