Problem with slick slider, how to rearrange prev and next buttons to another container?

Question

JavaScript

That's how it is by default, everything works fine


And you need to do it like


this

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

and adding position: relative;
But now the arrows do not work, that is, they do not move the slides, the slides move only if you drag them with the cursor.
And they also move along with the slide, that is, you turn over the slide and the arrows turn over with the slide.
The arrows are customized by overriding the prev, next and :before slider styles.
Picked through the inspector, and did not find a solution.

Answer 1

And you can also lay out the buttons separately and, when initializing the slider, indicate that these html elements will be buttons for the slider.
I haven't used it for a long time, but, if I'm not mistaken, you just need, for example, in prevArrow to specify the selector of the element (elements) that will be responsible for scrolling to the previous slide for this slider.
The documentation confirms this:
prevArrow
Type: string (html|jQuery selector) | object (DOM node|jQuery object)

Answer 2

$('.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 - Where to insert buttons
appendDots - Where to insert dots

.slider2-image-wrapper{
width: (Тут длина фото)px;
position: absolute;
bottom: 0;
z-index: 2;
}