光滑的滑塊空白空間，帶有流體背景圖像

Question

我正在使用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> 

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/