具有流体背景图像的光滑滑块空白空间答案

【问题标题】：Slick slider empty space with fluid background image具有流体背景图像的光滑滑块空白空间
【发布时间】：2017-09-05 22:16:52
【问题描述】：

我正在使用 Slick 滑块显示一些流动的背景图像，但是添加的每个新图像（“slide-img”类），都会在滑块的顶部和底部添加一个空白区域。

我认为 padding-top 以某种方式导致了这种情况，但我不知道如何修复它以保持流畅的效果，如果有人知道，我将不胜感激。

这里是JSFiddle

$('.slides').slick({
    slidesToShow: 1,
    autoplay: true,
});

.slide-img {
  background: url('http://i.imgur.com/RVfIr7W.jpg') no-repeat center / 100%;
  padding-top: 36.59%;
}

<link href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>

  <div class="slides">
    <div class="slide-img"></div>
    <div class="slide-img"></div>
    <div class="slide-img"></div>
  </div>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

【问题讨论】：

标签： javascript html css slider slick.js

【解决方案1】：

Slick 为幻灯片创建一个包装器并将它们并排放置，因此当您在幻灯片本身上使用填充时，它将根据所有幻灯片放在一起的宽度计算百分比。

你需要添加一个内部 div 来放置 padding，这样它会占用单张幻灯片的百分比，你会得到你想要的高度。

  <div class="slides">
    <div><div class="slide-img"></div></div>
    <div><div class="slide-img"></div></div>
    <div><div class="slide-img"></div></div>
  </div>

https://jsfiddle.net/ke51vqqm/3/

【讨论】：