在 bootstrap 容器的开头启动光滑的滑块并全角滚动

Question

很难描述我想要什么。但是让我们试试... ;-)

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

这是我的实际代码/工作示例： 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>

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

Answer 1

只需将滑块放入您的容器中即可 div。

$('.slider-services').slick({
    dots: false,
    arrows: true,
    prevArrow: '<button type="button" class="slick-prev"> <- </button>',
    nextArrow: '<button type="button" class="slick-next"> -> </button>',
    appendArrows:$('.slider-arrows'),
    slidesToShow: 5,

   });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.0/slick.min.css" /> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.0/slick-theme.min.css" />


<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 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>
 </div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.0/slick.js"></script>

Answer 2

找到比以前更好的解决方案（查看编辑）您需要做的就是将 slick-list 溢出设置为可见并确保您的父容器隐藏它。

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

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

更新 1

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

在 bootstrap 容器的开头启动光滑的滑块并全角滚动

Start slick slider at start of bootstrap container and scroll in full width

javascript

css

jquery

twitter-bootstrap

slick.js