css - 响应断点不适用于 Splide js 滑块

Question

我正在使用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>

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

标签： cssresponsive-designsplidejs

Answer 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>