在页面的白色空白在机动性

Question

我有一个带有slick.js轮播的网站。我注意到在屏幕小于约770px的设备上查看网站时，页面侧面会出现白色间隙。

经过一些测试后，我注意到如果从网站上删除slick.js，白色间隙就会消失 起初，我认为幻灯片的内容是由它引起的，但是我将每张幻灯片缩小到几个单词并且仍然存在白色差距。

这是HTML：

<div class="m-carousel" dir="rtl">
    <div class="slide">Test Slide</div>
    <div class="slide">Test Slide</div>
    <div class="slide">Test Slide</div>
    <div class="slide">Test Slide</div>
</div>

和Javascript（页面加载后）：

$('.m-carousel').slick({
    dots: true,
    rtl: true
});

CSS（关于滑块）：

// slick slider styling
.slick-dots li button:before {
    font-size: 9px;
}

.slick-dots li.slick-active button:before {
    color: accent;
}

在移动设备上，页面从一侧移动到另一侧（当它不是假设时），揭示并隐藏该间隙。这真的很烦人。

我尝试将overflow-x: hidden设置为正文，但这会导致网站导航和整体滚动出现许多问题。

Answer 1

我花了很多时间才弄明白但是我终于做到了 问题是箭头。看起来当你把bootstrap和slick.js放在一起时，在767px以下的屏幕宽度上，没有箭头，并且有一个白色无法解释的间隙。

要解决这个问题，我所要做的就是禁用javascript中的箭头：

$('.m-carousel').slick({
  arrows: false
});

您可以看到显示白色差距here的演示。

非常感谢NominalAeon的持续帮助和支持。

Answer 2

我认为你的问题是溢出的。您可能已经能够保持箭头并将溢出更改为隐藏。