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

Question

[Альберт]

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


А надо вот так сделать


Стрелки то получилось переставить в в блок-обертку изображения с помощью параметра slick`a

appendArrows: $(".slider2-image-wrapper")

и добавления ему position: relative;
Но теперь стрелки не работают, то есть не двигают слайды, слайды двигаются только если курсором тащить их.
И еще они двигаются вместе со слайдом, то есть перелистываешь слайд и стрелки перелистываются со слайдом.
Стрелки кастомизированы через перебитие стилей слайдера prev, next и :before.
Ковырял через инспектор, так и не нашел решения.

Answer 1

[Вадим]

А ещё Вы можете сверстать кнопки отдельно и при инициализации слайдера указать, что эти html элементы будут кнопками для слайдера.
Давно им не пользовался, но, если не ошибаюсь, то нужно просто, например, в prevArrow указать селектор элемента(элементов) которые будут отвечать за перелистывание на предыдущий слайд для данного слайдера.
Документация это подтверждает:
prevArrow
Type: string (html|jQuery selector) | object (DOM node|jQuery object)

Answer 2

[Alams Stoyne]

$('.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;
}

Comments

[Альберт]

Спасибо, но это не работает

[Alams Stoyne]

Альберт, надо смотреть выложите код на CodePen