2016-11-03 4 views
-2

Ich habe Probleme beim Erstellen einer Ansicht, die Bilder horizontal mit kleinen Pfeilen zentriert in vertikal auf der linken und rechten Seite des div enthält die Bilder zum Scrollen der Ansicht enthält.Floating Links und Rechts Pfeile

Die Pfeile enden zentriert relativ zur Seite, nicht zum mittleren Bildteil.

Ich versuche, es so aussehen zu machen: http://www.vanleeuwenicecream.com/

Ich würde die Pfeile links und rechts wie mit nur CSS/HTML positioniert werden, wenn möglich. Hier

ist das, was ich bisher: https://github.com/thorkia/cssPositioningIssue

Jede Hilfe würde geschätzt

Hinweis:

Ich kann die Ansicht blättern fein machen, indem Sie den linken Rand auf dem div Ändern der umschließende Bilder mit js. Ich habe das für die Probe entfernt. Ich brauche nur richtig

+0

positioniert Pfeile möchten Sie vielleicht schließen, wo in Ihrem Code, die Elemente und Stile in Frage sind. Noch besser, isolieren Sie das Problem und fügen Sie den entsprechenden Code hier hinzu, damit diejenigen, die Ihnen helfen möchten, Ihre Codebasis nicht durchsuchen müssen. – heyitsjhu

+0

Erstellen Sie ein Code-Snippet hier oder auf jsfiddle, und erstellen Sie, was Sie haben. HTML und CSS. – junkfoodjunkie

+0

müssen Sie den Code hier angeben. –

Antwort

1

.imagesContainer { 
 
    width: 100%; 
 
    height: 500px; 
 
    position: relative; 
 
    background: red; 
 
} 
 

 
.imageScrollers .imageScrollBack img { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    margin: auto; 
 
    height: 20px; 
 
} 
 

 
.imageScrollers .imageScrollNext img { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    height: 20px; 
 
}
<div class="imagesContainer"> 
 

 
    <div class="imageScrollers"> 
 
    <span class="imageScrollBack"><img src="dawdaw" alt=""></span> 
 
    <span class="imageScrollNext"><img src="dawdaw" alt=""></span> 
 
    </div> 
 
</div>

Verwandte Themen