Verhindern von Überlauf: versteckt das Bild beschneiden

Question

Ich arbeite gerade an einem Karussell, nach Facebook F8 Fotokarussell am Ende der their page modelliert.

Mein Karussell Struktur ist die gleiche grundsätzlich:

<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
</div> 

Für die SCSS I

.container { 
    width: 100%; 
    position: relative; 
    height: 450px; 
    overflow: hidden; 
    div { 
    position: absolute; 
    top: 0; 
    width: 1400px; 
    display: inline-block; 
    background-position: center; 
    background-size: 1400px 450px; 
    background: url('...'); 
    height: 100%; 
    } 
    &:nth-child(2) { left: 1400px; } 
} 

Die verschachtelte Kind divs innerhalb des Behälters haben, sind beide größer als die Bildschirmbreite und ich möchte blättern sie horizontal. Allerdings habe ich einen Überlauf eingestellt: versteckt auf dem Container, um das Karussell auf die Breite der Seite zu beschränken. Wenn es also über das Ende meines Bildschirms hinaus scrollt, wird der Rest des Div abgeschnitten.

Um das Karussell horizontal zu scrollen, setze ich ein Intervall und benutze transform: translateX(), um es alle paar ms um ein paar Pixel zu verschieben.

Wie kann ich das Bild nicht beschneiden, aber dem Benutzer nicht erlauben, seitlich über die Bildschirmabmessungen zu scrollen?

Answer 1

jk dummer Fehler, ich habe das Containerelement übersetzt.

Ich reparierte es, indem ich das Containerelement die gesamte Breite der zwei Bilder machte, und dann das in einem anderen Behälterelement einschloss, das Überlauf hatte: verborgen und Breite: 100%.