滑らかなスライダの空きスペース流体の背景画像

Question

滑らかなスライダを使用していくつかの背景画像を表示していますが、新しい画像が追加されたとき（「slide-img」クラス）、空きスペースがスライダの上下に追加されます。

パディングトップが何らかの原因で発生していると思いますが、流体効果を維持して修正する方法がわかりません。誰かが知っていれば、私は感謝しています。ここで

は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

スリックは、スライドのラッパーを作成し、それらを並べて置き、あなたはスライド自体に詰め物を使用するときに、それがベースの割合を計算しますです一緒に置かれたすべてのスライドの幅。

パディングを配置するために内部divを追加する必要があります。この方法では、1つのスライドの割合が必要となり、探している高さになります。

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