我正在通过他们的 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 在移动设备上是否有任何细节或已知问题?