2017-03-02 15 views
0

Ich arbeite gerade an einem Karussell, nach Facebook F8 Fotokarussell am Ende der their page modelliert.Verhindern von Überlauf: versteckt das Bild beschneiden

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?

+1

Bitte aktualisieren Sie Ihre Frage so, dass sie den gesamten relevanten Code in einem [minimalen, vollständigen und überprüfbaren Beispiel] (http://stackoverflow.com/help/mcve) anzeigt. Wir können unmöglich Ihr CSS reparieren, ohne es zu sehen. –

+0

@ObsidianAge Hey, tut mir leid, ich habe gerade meine Frage mit den Stilen aktualisiert –

Antwort

0

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%.

Verwandte Themen