スリックカルーセル2番目のスライドが表示されます

Question

slickを使用して全幅イメージスライダーを構築しようとしています。 問題は、すべての画像が1920ピクセル幅で、最大幅が100％に設定されていることです。だから彼らは小さい画面に反応します。

以下は私が実装したサンプルです。

https://jsfiddle.net/wjjLyq3s/4/

$(document).ready(function() { 
 
    $(".single-item").slick({ 
 
    dots: false, 
 
    arrows: false 
 
    }); 
 
});

.container { 
 
    margin: 0; 
 
    padding: 0px; 
 
    width: 100%; 
 
    background: #419be0; 
 
} 
 

 
.slick-slide { 
 
    text-align: center; 
 
    color: #419be0; 
 
    background: white; 
 
} 
 

 
h3.red { 
 
    width: 1920px; 
 
    height: 300px; 
 
    background-color: red; 
 
    color: #fff; 
 
} 
 

 
h3.green { 
 
    width: 1920px; 
 
    height: 300px; 
 
    background-color: green; 
 
    color: #fff; 
 
} 
 

 
h3.blue { 
 
    width: 1920px; 
 
    height: 300px; 
 
    background-color: blue; 
 
    color: #fff; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script> 
 

 
<div class='container'> 
 
    <div class='single-item'> 
 
    <div> 
 
     <h3 class="red">1</h3> 
 
    </div> 
 
    <div> 
 
     <h3 class="green">2</h3> 
 
    </div> 
 
    <div> 
 
     <h3 class="blue">3</h3> 
 
    </div> 
 
    </div> 
 
</div>

私はここに任意の画像を追加していないが、問題は、ここで同じ表示されています。最初に読み込むと、右側のスライドがわずかに表示されます。しかし、一度次のスライドに移動すると、すべてが問題なく全幅になります。

したがって、右側のスライドが最初の負荷で見えないように修正が必要です。

ここでは1920px幅のdivを使用していますが、実際のスライダコードでは、画像に幅が割り当てられていないため、1920pxであり、max-widthを100％応答するように働く。

ここに統合されたコードはこの問題を示していないので、これをテストするにはjsfiddleリンクを使用してください。

Answer 1

私はこれがウィンドウスクロールのために起こっていると仮定します。

ようにそこに私たち（スライダーが開始される前に）アイテムが別の下に積層されていないスクロール我々は、スライダに高さを設定することができます

.slick-slider { 
    max-height: 300px; 
    overflow: hidden; 
}