@Ukuloli
Начинающий веб разработчик

Проблема со slick slider, как переставить кнопки prev и next в другой контейнер?

Вот так по дефолту, все работает прекрасно

5d5285645ff8d992844082.png
А надо вот так сделать
5d5285896004f802169859.png

Стрелки то получилось переставить в в блок-обертку изображения с помощью параметра slick`a
appendArrows: $(".slider2-image-wrapper")
и добавления ему position: relative;
Но теперь стрелки не работают, то есть не двигают слайды, слайды двигаются только если курсором тащить их.
И еще они двигаются вместе со слайдом, то есть перелистываешь слайд и стрелки перелистываются со слайдом.
Стрелки кастомизированы через перебитие стилей слайдера prev, next и :before.
Ковырял через инспектор, так и не нашел решения.
  • Вопрос задан
  • 965 просмотров
Решения вопроса 1
MrDecoy
@MrDecoy Куратор тега JavaScript
Верставший фронтендер
А ещё Вы можете сверстать кнопки отдельно и при инициализации слайдера указать, что эти html элементы будут кнопками для слайдера.
Давно им не пользовался, но, если не ошибаюсь, то нужно просто, например, в prevArrow указать селектор элемента(элементов) которые будут отвечать за перелистывание на предыдущий слайд для данного слайдера.
Документация это подтверждает:
prevArrow
Type: string (html|jQuery selector) | object (DOM node|jQuery object)
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
alams_stoyne
@alams_stoyne
Full Stack Developer - #PHP #CSS #JS #DB
$('.slick-slider .slider-items').slick({
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        dots: true,
        arrows: true,
        dotsClass: 'nav slide-dots',
        prevArrow: '<div class="prev"></div>',
        nextArrow: '<div class="next"></div>',	
        appendArrows: '.slider-navigation',		
        appendDots: '.slider-dots',
    });

appendArrows - Куда вставить кнопки
appendDots - Куда вставить точки

А в твоём случае это можно решить CSS - т.е контейнер с кнопками должен быть в длину фото
.slider2-image-wrapper{
width: (Тут длина фото)px;
position: absolute;
bottom: 0;
z-index: 2;
}
Ответ написан
Ваш ответ на вопрос

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

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