启动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

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

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

请参阅https://codepen.io/pnmcosta/pen/gypxgr。

更新1

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

Answer 2

只需将滑块放入您的容器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>