javascript - 光滑的 slider : align slide width to Bootstrap container width

Question

我正在使用灵活的 slider ( http://kenwheeler.github.io/slick/ ) 并排显示 3 张幻灯片。幻灯片居中，事件幻灯片显示在中间。

该网站基于 Bootstrap 4。我现在希望幻灯片与 Boostrap 容器的宽度相同。因此，事件(居中)幻灯片将与站点的其他容器元素完美对齐。左边和右边的幻灯片应该向两边增长。

需要明确的是: slider 应该有完整的宽度。这样左/右幻灯片可以增长到屏幕的末尾。只有事件幻灯片应与容器 DIV 对齐。

这是我需要/想要的示例:https://codepen.io/cray_code/pen/BXzxgP

这是我的代码:

$('.slider').slick({
  infinite: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  centerMode: true,
  enterPadding: '60px',
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container bg-light py-5 my-5">

  <h1>Container</h1>
  <h4>The slides should be the same width as the container
    <h4>

</div>


<div class="slider bg-light py-5 my-5">
  <div class="bg-dark text-white py-5">
    <h2>Slide 1</h2>
  </div>
  <div class="bg-dark text-white py-5">
    <h2>Slide 2</h2>
  </div>
  <div class="bg-dark text-white py-5">
    <h2>Slide 3</h2>
  </div>
  <div class="bg-dark text-white py-5">
    <h2>Slide 4</h2>
  </div>
  <div class="bg-dark text-white py-5">
    <h2>Slide 5</h2>
  </div>
</div>


<div class="container bg-light py-5 my-5">

  <h1>Container</h1>

</div>

我尝试为幻灯片的每个视口(viewport)设置固定宽度。但这不起作用，因为幻灯片宽度是可变的。

还有其他解决方案吗？

Answer 1

我不确定我是否正确理解了您的问题。但这是我在您的代码中所做的更改。

为了与其他部分保持一致，我向 slider div 添加了一个 container 类并更改了 slidesToShow: 3,

$('.slider').slick({
	infinite: true,
	slidesToShow: 3,
	slidesToScroll: 1,
	centerMode: true,
	enterPadding: '60px',
});

.slick-slide {opacity: 0.2; margin: 0 2rem;}
.slick-slide.slick-active {opacity: 1;}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">

 
<div class="container bg-light py-5 my-5">
	
	<h1>Container</h1>
	<h4>The slides should be the same width as the container<h4>
	
</div>


<div class="container slider bg-light py-5 my-5">
	<div class="bg-dark text-white py-5">
		<h2>Slide 1</h2>
	</div>
	<div class="bg-dark text-white py-5">
		<h2>Slide 2</h2>
	</div>
	<div class="bg-dark text-white py-5">
		<h2>Slide 3</h2>
	</div>
	<div class="bg-dark text-white py-5">
		<h2>Slide 4</h2>
	</div>
	<div class="bg-dark text-white py-5">
		<h2>Slide 5</h2>
	</div>
</div>


<div class="container bg-light py-5 my-5">
	
	<h1>Container</h1>
	
</div>