Расположить стрелочки поверх слайдера

Question

Делаю слайдер на сайте с помощью slick slider, но возник вопрос:

Как можно так расположить стрелки? Как выравнять их посередине относительно изображения?

Answer 1

Возможно такое решение Вашего примера:

html-разметка:

<div class="slider">
  <div class="container">
  <div class="img"><img src="" alt=""></div>
  <div class="img"><img src="" alt=""></div>
  <div class="img"><img src="" alt=""></div>
</div>
  <i class="fas fa-chevron-circle-left arrow-left"></i>
  <i class="fas fa-chevron-circle-right arrow-right"></i>
</div>

CSS-правила:

.slider{
  width:35%;
  margin: 0 auto;
  position:relative;
}
.container{
  display:flex;
  flex-flow:row wrap;
  justify-content:space-between;
  width:100%;
  margin: 0 auto;
}


.img{
  width:31%;
  padding:12% 0;
  background-color: lightgreen;
}

i{
  font-size: 2em;
  position:absolute;
  top:50%;
  transform:translate(50%,-50%);
  cursor:pointer;
}

i.arrow-left{
  left:0;
  transform:translate(-50%,-50%);
}

i.arrow-right{
  right:0;
}

БЛОГ НА HUSL

Расположить стрелочки поверх слайдера

Ответы (1 шт):