Slick Karussell 2. Folie sichtbar

Question

Ich versuche einen Vollbild-Slider mit Slick zu bauen. Die Sache ist, alle Bilder sind 1920px breit und sie haben maximale Breite auf 100% eingestellt. Sie reagieren also auf kleinere Bildschirme.

Unten ist die Probe Geige, die ich implementiert habe.

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>

ich jedes Bild hier nicht hinzugefügt haben, aber das Problem auch hier erscheint. Wenn Sie zum ersten Mal laden, ist die Folie auf der rechten Seite leicht sichtbar. Aber sobald Sie zur nächsten Folie gehen, ist alles voller Breite ohne irgendwelche Probleme.

Die Fixierung ist also erforderlich, damit der Schlitten auf der rechten Seite bei der ersten Ladung nicht sichtbar ist.

Bitte beachten Sie, dass ich die divs mit 1920px Breite hier in Geige benutzt habe, aber in meinem echten Slider Code gebe ich den Bildern keine Breite zu, da diese schon 1920px sind und ich ihre max-width auf 100% gesetzt habe um ansprechend zu arbeiten.

Bitte verwenden Sie jsfiddle Link, um dies zu testen, da der hier integrierte Code dieses Problem nicht zeigt.

Answer 1

Ich nehme an, dass dies wegen der Fensterrolle geschieht.

Wir können eine Höhe mit dem Schieber eingestellt, so dass es uns nicht blättern, wenn die Elemente einer unter anderen gestapelt werden (bevor der Schieber beginnt):

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