移动页面侧面的白色间隙

Question

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

经过一些测试，我注意到如果我从网站上删除 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

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

移动页面侧面的白色间隙

White Gap On Side Of Page In Mobile

html

javascript

css

slick.js