0

我正在通过他们的 CDN 使用最新版本的Splide(截至今天为 3.6.12)。

我的页面上有多个滑块,Splide 在桌面上运行良好。Chrome 中的响应模式也适用于任何尺寸。但是,当我使用真实的移动设备加载相同的页面时,无论我使用的是 Chrome 还是 Safari,所有的滑块都是隐藏的。我有一个默认配置,没有插件,我已经在多个设备上尝试过。

我在 Chrome 中检查了移动设备上的控制台,但没有看到任何警告或错误消息。我也已经检查过任何会导致这种情况的特定 CSS 样式。

如果我从 HTML 代码中删除 Splide 的容器,图像会再次出现在移动设备上。

我尝试使用 Codepen 重现该问题,但下面的示例实际上适用于移动设备

https://codepen.io/bruno-lv-que/pen/vYWRbvz

<div class="splide">
      <div class="splide__track">
        <ul class="splide__list">
          <li class="splide__slide"><img src="https://picsum.photos/seed/picsum/250/250" /></li>
          <li class="splide__slide"><img src="https://picsum.photos/seed/picsum/250/250" /></li>
          <li class="splide__slide"><img src="https://picsum.photos/seed/picsum/250/250" /></li>
        </ul>
      </div>
    </div>
    <div class="splide">
      <div class="splide__track">
        <ul class="splide__list">
          <li class="splide__slide"><img src="https://picsum.photos/seed/picsum/250/250" /></li>
          <li class="splide__slide"><img src="https://picsum.photos/seed/picsum/250/250" /></li>
          <li class="splide__slide"><img src="https://picsum.photos/seed/picsum/250/250" /></li>
        </ul>
      </div>
    </div>
<style>
body { background: black; }
div.splide { width: 250px; height: 250px; margin-bottom: 25px; }
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
  var elms = document.getElementsByClassName('splide');
  for (var i = 0; i < elms.length; i++)
    new Splide(elms[i]).mount();
});
</script>

Splide 在移动设备上是否有任何细节或已知问题?

4

0 回答 0