Question

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

该网站基于Bootstrap4。我现在希望幻灯片的宽度与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>

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

还有其他解决方案吗？

Answer 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>

Answer 2

第一：从.slick-slide类中删除边距

.slick-slide {opacity: 0.2;}

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

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

用容器类包装滑块

Answer 3

尝试将div与类行放置在一起，并在其中放置col-md-6 col-12，在其内部放置光滑的div，其他设置相同。我认为这可能会给您带来结果。

光滑的滑块：将滑块的宽度与Bootstrap容器的宽度对齐

3 个答案: