光滑的旋轉木馬第2張幻燈片可見

Question

我正在嘗試使用浮油建立一個全寬度的圖像滑塊。 問題是，所有圖像都是1920px寬，它們的最大寬度設置爲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>

我還沒有添加任何這裏形象，但問題是這裏出現相同。如果您第一次加載，右側的幻燈片稍微可見。但是，一旦你移動到下一張幻燈片，一切都是完整的寬度沒有任何問題。

所以需要修復，以便在第一次加載時右側的幻燈片不可見。

請注意，我在這裏使用了div的寬度爲1920px的div，但是在我的實際滑塊代碼中，我沒有爲圖像分配任何寬度，因爲這些寬度是1920x12像素，我已將它們的最大寬度設置爲100％做出迴應。

請使用jsfiddle鏈接測試此代碼，因爲此處集成的代碼不會顯示此問題。

Answer 1

我認爲這是由於窗口滾動而發生的。

我們的高度設置爲滑塊，使我們有當項目被堆疊在另一個（滑塊開始之前）沒有滾動：

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