javascript - 在 Bootstrap 容器的开头启动光滑的 slider 并全宽滚动

Question

描述我想要的东西有点困难。但是让我们试试……;-)

我正在使用灵活的 slider 显示 10 个元素中的 5 个。 slider 应使用页面的整个宽度，但第一项不应从页面的最左侧开始，而应在容器的开头。

这是我的实际代码/工作示例: https://codepen.io/cray_code/pen/MQmeNN

<div class="bg-dark text-white py-5">
    <div class="container mb-5">
        <div class="row d-flex align-items-center">
            <div class="col-lg-6">
                <h1>Headline</h1>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
            </div>
            <div class="col-lg-6 d-flex justify-content-end">
                <div class="slider-arrows"></div>
            </div>
        </div>
    </div>

    <div class="slider-services text-dark">
        <div class="p-5 mx-3 bg-light">1</div>
        <div class="p-5 mx-3 bg-light">2</div>
        <div class="p-5 mx-3 bg-light">3</div>
        <div class="p-5 mx-3 bg-light">4</div>
        <div class="p-5 mx-3 bg-light">5</div>
        <div class="p-5 mx-3 bg-light">6</div>
        <div class="p-5 mx-3 bg-light">7</div>
        <div class="p-5 mx-3 bg-light">8</div>
        <div class="p-5 mx-3 bg-light">9</div>
        <div class="p-5 mx-3 bg-light">10</div>
    </div>
</div>

如您所见， slider 从页面左侧开始。Bootstrap 4 有什么方法可以在容器宽度内启动 slider (与标题对齐)并滚动到页面左侧？

Answer 1

找到了比以前更好的解决方案(参见编辑)，您需要做的就是将 slick-list overflow 设置为可见，并确保您的父容器将其隐藏。

.container-fluid{overflow:hidden;}
.slick-list{overflow:visible;}

参见 https://codepen.io/pnmcosta/pen/GYpxgr例如。

更新 1

对示例进行了一些更新，支持淡化边缘、箭头和点。