我通过他们的CDN使用最新版本的Splide(截至今日的3.6.12(。
我的页面上有多个滑块，Splide在桌面上运行得非常好。Chrome中的响应模式在任何尺寸下都能很好地工作。但是，当我使用真实的移动设备加载同一页面时，无论是使用Chrome还是Safari，所有滑块都将隐藏。我有一个默认的配置，没有插件，我已经在多个设备上尝试过了。
我在Chrome中查看了移动设备上的控制台，没有看到任何警告或错误消息。我也已经检查了任何可能导致这种情况的特定CSS样式。
如果我从HTML代码中删除Splide的容器，图像会再次出现在手机上。
我试图使用Codepen重现这个问题，但下面的例子实际上适用于移动！
https://codepen.io/bruno-l-v-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在移动设备上是否存在任何细节或已知问题？
创建一个帐户以提供潜在的解决方案，我在通过Webflow创建网站时遇到了这种情况。
修复是为了确保所使用的图像没有启用延迟加载，由于某种原因，该组件似乎无法使用延迟加载。
如果有效，请告诉我！