响应断点不适用于 Splide js 滑块答案

【问题标题】：Responsive breakpoints not working for Splide js slider响应断点不适用于 Splide js 滑块
【发布时间】：2021-09-13 06:47:30
【问题描述】：

我正在使用Splide js 实现一个轮播滑块。当我将浏览器大小调整为 767 时，响应式断点设置不起作用。它仅在包括平板电脑和移动设备在内的所有屏幕上显示 1024 的断点设置。

这是我的代码：

<script>
    document.addEventListener("DOMContentLoaded", function () {
        new Splide("#card-slider", {
          type: "loop",
          heightRatio: 0.5,
          perPage: 5,
          breakpoints: {
            640: {
              perPage: 1,
        
            },
            767: {
              perPage: 2,
          
            },
            1024: {
              perPage: 3,
             
            },
          },
          focus: "center",
          gap: '2em',
          updateOnMove : true,
          pagination: false,
        }).mount();
      });
</script>

我在这里遗漏了什么吗？是否有解决方法可以在所有断点上进行这项工作？提前致谢！

【问题讨论】：

标签： css responsive-design splidejs

【解决方案1】：

断点必须按从大到小的顺序排列：

<script>
    document.addEventListener("DOMContentLoaded", function () {
        new Splide("#card-slider", {
          type: "loop",
          heightRatio: 0.5,
          perPage: 5,
          breakpoints: {
            1024: {
              perPage: 3,
             
            },
            767: {
              perPage: 2,
          
            },
            640: {
              perPage: 1,
        
            },
          },
          focus: "center",
          gap: '2em',
          updateOnMove : true,
          pagination: false,
        }).mount();
      });
</script>

【讨论】：