描述我想要的东西有点困难。但是让我们试试……;-)
我正在使用灵活的 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 (与标题对齐)并滚动到页面左侧?
最佳答案
找到了比以前更好的解决方案(参见编辑),您需要做的就是将 slick-list
overflow 设置为可见,并确保您的父容器将其隐藏。
.container-fluid{overflow:hidden;}
.slick-list{overflow:visible;}
参见 https://codepen.io/pnmcosta/pen/GYpxgr例如。
更新 1
对示例进行了一些更新,支持淡化边缘、箭头和点。
关于javascript - 在 Bootstrap 容器的开头启动光滑的 slider 并全宽滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48730668/