2016-11-03 9 views
-2

У меня возникают проблемы с созданием представления, которое имеет изображения, уложенные горизонтально, с небольшими стрелками, центрированными вертикально в левой и правой части div, содержащих изображения для прокрутки изображения.Плавающие стрелки влево и вправо

Стрелки в центре располагаются относительно страницы, а не центральной части изображения.

Я пытаюсь сделать это выглядеть примерно так: http://www.vanleeuwenicecream.com/

Я хотел бы, стрелки влево и вправо, чтобы быть размещены только с CSS/HTML, если это возможно.

Вот то, что я до сих пор: https://github.com/thorkia/cssPositioningIssue

Любая помощь будет оценена

Примечание:

я могу сделать штраф вид прокрутки путем изменения левого края на DIV, содержащей изображения с js. Я удалил это для образца. Мне просто нужно стрелками расположены правильно

+0

вы можете включить, где в вашем коде, элементы и стили в которых идет речь. Еще лучше, изолируйте проблему и добавьте соответствующий код здесь, поэтому те, кто пытается вам помочь, не должны просеивать вашу кодовую базу. – heyitsjhu

+0

Создайте фрагмент кода здесь, или на jsfiddle, и создайте то, что у вас есть. HTML и CSS. – junkfoodjunkie

+0

вам необходимо указать код здесь. –

ответ

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>

Смежные вопросы