Slick Slider：将幻灯片宽度与 Bootstrap 容器宽度对齐答案

【问题标题】：Slick Slider: align slide width to Bootstrap container widthSlick Slider：将幻灯片宽度与 Bootstrap 容器宽度对齐
【发布时间】：2019-07-25 09:22:22
【问题描述】：

我正在使用光滑的滑块 (http://kenwheeler.github.io/slick/) 并排显示 3 张幻灯片。幻灯片居中，活动幻灯片显示在中间。

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

明确一点：滑块应该是全宽的。这样左/右幻灯片可以增长到屏幕的末尾。只有活动幻灯片应与容器 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>

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

还有其他解决办法吗？

【问题讨论】：

标签： javascript jquery css bootstrap-4 slick.js

【解决方案1】：

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

为了与其他部分保持一致，我在滑块 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>

【讨论】：

感谢您的回答，但滑块应为全宽。这样左/右幻灯片可以增长到屏幕的末尾。只有活动幻灯片应与容器 DIV 对齐。
我发现这个结帐背后有很多工作如果它有帮助的话——codepen.io/anon/pen/mNEjWN
谢谢，但是我用容器div测试的时候，宽度不一样
使用类容器将不起作用，您必须在计算中进行修改才能达到您的宽度。

【解决方案2】：

尝试放置一个带有类行的 div，并在其中放置一个 col-md-6 col-12，并在其中放置光滑的 div，其他的也一样。我认为这可能会给你带来结果。

【讨论】：

对不起，这没有用:(

【解决方案3】：

首先：从 .slick-slide 类中删除边距

.slick-slide {opacity: 0.2;}

然后禁用 centerMode，将 enterPadding 设置为零。像这样

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

用容器类包裹你的滑块

【讨论】：

感谢您的回答，但滑块应为全宽。这样左/右幻灯片可以增长到屏幕的末尾。只有活动幻灯片应与容器 DIV 对齐。