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

Stack Overflow用户

提问于 2021-07-01 15:36:44

回答 1查看 1.3K关注 0票数 2

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

Stack Overflow用户

回答已采纳

发布于 2021-09-07 23:04:29

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

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

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68206126

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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