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

Question

[Максим Иванов]

При уменьшении размера экрана (меньше 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
      }
    },
  ]
});

Answer 1

[Steppp]

Простым языком надо на каждый слайд прикрутить стрелки?

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

Comments

[Максим Иванов]

А если уже не на каждый слайд, то нужно для разного экрана подстраивать их, так как каждые +-200 пикселей стрелочки съезжают

[Steppp]

Максим Иванов,
На каждый слайд стрелки не делают! Все стрелки подгоняют! Подогнать под размер, допустим от левого края 10%
Вообще делается так,

<div class wrapper>
  <div class slider>
    <div class slide>слайд</div>
    <div class slide>слайд</div>
    <div class slide>слайд</div>
  </div>
  <div class arrow>Стрелки</div>
</div>

К классу wrapper, позиционируешь стрелки! И если при экране меньше 1920, делаешь @media запрос, и подгоняешь стрелки под 1920 экран
@media запрос, и подгоняешь под 1440 экран
@media запрос, и подгоняешь под 768 экран
@media запрос, и подгоняешь под 320 экран
итд!
Но обычно стрелки делают 50% высоты блока wrappre (top: 50%; left: -50px и для другой стрелки right: -50px ) - Это если стрелки за пределами слайдов!

[Максим Иванов]

Steppp, я понял, что я делаю всё правильно. Я думал просто, что никто так не делает столько медиа для стрелочек как я, а оно вон как...

[Steppp]

Максим Иванов, Все зависит от слайдера, Обычный простой слайдер, хватает 1 медиазапроса. Делать все размеры в процентах, а на мобиле стрелочки под слайдами, уже медиазапрос.