Javascript 手机中页面侧面的白色间隙

我有一个网站，里面有一个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>

CSS（关于滑块）：

在移动设备上，页面从一边移动到另一边（在不需要的情况下），显示和隐藏该间隙。真烦人

---

我曾尝试在正文中设置

overflow-x:hidden

，但这会导致网站的导航和整体滚动出现很多问题。

我花了很多时间才弄明白，但最终还是解决了。
问题在于箭头。将bootstrap和slick.js放在一起时，屏幕宽度低于767px，似乎没有箭头，并且有一个无法解释的白色间隙

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

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

你可以看到一个演示显示白色的差距

---

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

我认为您的问题已经解决了。您可以保留箭头并将溢出更改为隐藏。

您也可以添加css吗？或者甚至构建一个代码笔或小提琴？@NominalAeon我在滑块上添加了CSS样式。我不认为小提琴能很好地说明这个问题，但我会尝试。不，那很好，我只是想要css，但我希望你在这方面使用更多。你没有将任何样式应用到你正在光滑的容器上？@NominalAeon

.m-carousel

在一个

.container

（Bootstrap的一个）中，在我给出的

最小高度的一个部分中，
填充底部
和
边框底部
。并且您确定没有其他页面元素破坏视口宽度。容器将占据可用宽度，但这并不一定意味着它或光滑导致它。很高兴你明白了，很沮丧我没想到。感谢您的关注@gofilord谢谢你的回答，我想这节省了很多时间。
// slick slider styling
.slick-dots li button:before {
    font-size: 9px;
}

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

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