@mikilikala
На фронте

Как позиционировать стрелочки относительно блока slick slider?

При уменьшении размера экрана (меньше 1920) стрелочки начинают "ехать", так как они позиционируются относительно блока в котором размещены слайды. Пытаюсь прописать position: relative; для слайда активного и просто для слайда (любого), но всё равно позиционируется относительно блока в котором все слайды.
Как позиционировать относительно слайда?

<div class="slides">
	<div class="slide-item">
		<a class="slide-item-link" href="#"><img src="img/slider/slide-1.png" alt="Слайд"></a>
	</div>
	<div class="slide-item">
		<a class="slide-item-link" href="#"><img src="img/slider/slide-1.png" alt="Слайд"></a>
	</div>
	<div class="slide-item">
		<a class="slide-item-link" href="#"><img src="img/slider/slide-1.png" alt="Слайд"></a>
	</div>
</div>


.slide-item-link img {
	margin: 0 auto;
	max-width: 100%;
}

.slides {
	margin: 0 auto;
    max-width: 1920px;
	margin-top: 163px;
	margin-bottom: 500px;
}

.slider-arrows {
	background-color: #fff;
	cursor: pointer;
}

.slider-arrows__next {
	z-index: 1;
	position: absolute;
    bottom: 49px;
    right: 359px;
	padding: 50px;
	border-radius: 0px 7px 0px 0px;
}

.slider-arrows__prev {
	z-index: 1;
	position: absolute;
    bottom: 49px;
    right: 473px;
	padding: 50px;
	border-radius: 7px 0px 0px 0px;
}


$('.slides').slick({
  centerMode: true,
  centerPadding: '230px',
  slidesToShow: 1,
  nextArrow:
  '<img class="slider-arrows slider-arrows__next" src="img/slider/right.svg">',
  prevArrow:
  '<img class="slider-arrows slider-arrows__prev" src="img/slider/left.svg">',
  responsive: [
    {
      breakpoint: 1921,
      settings: {
        centerPadding: '230px'
      }
    },
    {
      breakpoint: 1681,
      settings: {
        centerPadding: '160px'
      }
    },
    {
      breakpoint: 1601,
      settings: {
        centerPadding: '130px'
      }
    },
    {
      breakpoint: 1441,
      settings: {
        centerPadding: '80px'
      }
    },
    {
      breakpoint: 1361,
      settings: {
      centerMode: false
      }
    },
  ]
});
  • Вопрос задан
  • 105 просмотров
Пригласить эксперта
Ответы на вопрос 1
@Steppp
Простым языком надо на каждый слайд прикрутить стрелки?

если слайд position: relative, то внутри absolute иначе никак!
absolute ищет первого родителя с position: relative!!!
Именно РОДИТЕЛЯ! Не на одном уровне, а РОДИТЕЛЯ
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы