在引导容器开始时启动光滑滑块，并在全宽度滚动

Question

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

我用光滑的滑块显示10个项目中的5个。滑块应该使用页面的整个宽度，但是第一项不应该从页面的最左边开始，而应该在容器的开始处开始。

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

如您所见，滑块从页面的左边开始。是否有任何方法启动引导带4在容器宽度内启动滑块(与标题对齐)并滚动到页面的左侧？

Answer 1

找到一个比以前好得多的解决方案(请参阅编辑)，只需将slick-list溢出设置为可见，并确保父容器隐藏了它。

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

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

更新1

添加了一些更新的例子，支持褪色的边缘，箭头和点。

Answer 2

把滑块放进你的容器里。

​

$('.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>

​