Как таким образом расположить стрелки в slick slider?

Slick Slider - это популярная библиотека для создания адаптивных и красивых слайдеров на веб-страницах. Для расположения стрелок (prev и next) в Slick Slider существует несколько способов.

Первый способ - использование стилей CSS. Для этого вам нужно добавить пользовательские стили в свой CSS-файл или в раздел style вашей HTML-страницы. Например, вы можете использовать следующий код:

.slick-prev,
.slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  cursor: pointer;
}

.slick-prev {
  left: 10px;
}

.slick-next {
  right: 10px;
}

В этом примере мы используем абсолютное позиционирование для переводов стрелок в центр слайдера по вертикали с помощью top: 50%; и transform: translateY(-50%);. Мы также устанавливаем z-index: 9999;, чтобы убедиться, что стрелки находятся над слайдами. С помощью left и right мы задаем горизонтальное расположение стрелок относительно слайдера.

Второй способ - использование опций Slick Slider. Вы можете настроить расположение стрелок с помощью опций prevArrow и nextArrow. Например:

$('.your-slider').slick({
  // другие опции
  prevArrow: '<button type="button" class="slick-prev">Previous</button>',
  nextArrow: '<button type="button" class="slick-next">Next</button>',
});

В этом примере мы используем HTML-код в качестве значений опций prevArrow и nextArrow, чтобы создать свои пользовательские кнопки для стрелок. Вы можете стилизовать эти кнопки с помощью CSS в вашем файле стилей.

Третий способ - использование событий Slick Slider. Вы можете использовать событие init для настройки расположения стрелок после инициализации слайдера. Например:

$('.your-slider').on('init', function(event, slick){
  $('.slick-prev').appendTo('.your-slider');
  $('.slick-next').appendTo('.your-slider');
});

В этом примере мы используем событие init, чтобы переместить кнопки стрелок внутрь контейнера слайдера (.your-slider). Вы можете изменить этот код в соответствии с вашей разметкой и требованиями.

Это только некоторые из способов расположения стрелок в Slick Slider. Вы также можете с помощью CSS и JavaScript добавить дополнительные стили и функциональность к стрелкам, чтобы они выглядели и работали так, как вам нужно.