响应断点不适用于 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>

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

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>

Answer 2

您必须先校正像素频率。它是从最大到最小的。您在选项卡处写了 767px，但选项卡从 768px 开始，因此代码中缺少一个像素。您必须将像素设置为768px才能解决问题。

document.addEventListener("DOMContentLoaded", function () {
  new Splide(".splide", {
    type: "loop",
    // heightRatio: 0.5,
    // perPage: 5,
    breakpoints: {
      640: {
        perPage: 1,
  
      },
      768: {
        perPage: 2,
    
      },
      1024: {
        perPage: 3,
       
      },
      1440: {
        perPage: 5,
       
      },
    },
    // focus: "center",
    // gap: '2em',
    updateOnMove : true,
    pagination: false,
  }).mount();
});

Answer 3

document.addEventListener("DOMContentLoaded", function () { 新的 Splide(".splide", { 类型：“循环”， // heightRatio: 0.5, // 每页：5, 断点：{ 640：{ 每页：1，

  },
  768: {
    perPage: 2,

  },
  1024: {
    perPage: 3,
   
  },
  1440: {
    perPage: 5,
   
  },
},
// focus: "center",
// gap: '2em',
updateOnMove : true,
pagination: false,

}).mount(); });

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

Responsive breakpoints not working for Splide js slider

css

responsive-design

splidejs