Question

我使用Slick滑块显示一些fuid背景图像，但添加了每个新图像（＆＃34; slide-img＆＃34;类），滑块的顶部和底部添加了一个空白区域。

我认为填充顶部会导致这种情况，但我不知道如何修复它以保持流畅效果，如果有人知道，我将不胜感激。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

你需要添加一个内部div来填充填充，这样它需要一张幻灯片的百分比，你将得到你正在寻找的高度。

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

与流动背景图象的油滑的滑子空的空间

1 个答案: