Блог

Как я могу расположить навигационные стрелки под каруселью изображений в фиксированном месте, что по-прежнему позволит им быстро перемещаться при настройке размера браузера? Прямо сейчас я могу расположить стрелки там, где я хочу, только при определенном размере браузера, но когда он настраивается, он перемещается не вместе с изображением. Я использую Glide (http://jedrzejchalubek.com/glide /) для карусели изображений.

 .slider-arrow {
display:block;
position:fixed;
font-family: 'Roboto', sans-serif;
font-size: 20px;

}

.slider-arrow--right {  
margin-left: 60%;

}

.slider-arrow--left {
margin-left: 40%;

}
  

Существует несколько способов сделать это. Вероятно, самым простым способом будет поместить стрелки внутри того же div, в котором находится изображение. Затем вы можете захотеть установить стиль text-align=left для div, чтобы стрелки выравнивались по левому краю. Однако я бы рекомендовал лучше разобраться в CSS-макете, прежде чем продолжить. Как только вы поймете, как работает относительное, фиксированное и абсолютное позиционирование, все станет намного проще. Смотрите эту ссылку: http://learnlayout.com/position.html

 #imgdiv {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 400px;
    margin-left: -200px;
    height: 400px;
    margin-top: -200px;
    text-align: left;
}

<div id="imgdiv">
    <img src="img1.jpg"><br><img src="arrow1.jpg">amp;nbsp;<img src="arrow2.jpg">
</div>