Why doesn't Slick-slider switch slides?

Question

JavaScript

I plugged in the slick-slider, placed it inside the container, and tweaked it to my liking. But, as soon as I connected it, i.e. I haven’t set it up yet, the previous button (previous slide) didn’t work for me, as a result I got this thing: the buttons on the first two slides don’t work, but on the third (last) they still decide that it’s time for business. Useless selectors, classes, etc. are possible in the code.

Code from HTML:

<div class="slider__first">
        <div class="slider__first__item">
            <div class="container">
                <div class="slider__first__item__text">
                    <div class="slider__first__item__text1">
                        Modern technology and expert-class dentists
                    </div>
                    <div class="slider__first__item__text2">
                        get a brilliant smile for every day
                    </div>
                    <a href="#" class="slider__first__item__text3">
                        get
                    </a>
                    <div class="slider__first__item__arrows"></div>
                </div>
                <div class="slider__first__item__bg">
                </div>
            </div>
        </div>
        <div class="slider__first__item">
            <div class="container">
                <div class="slider__first__item__text">
                    <div class="slider__first__item__text1">
                        Modern technology and expert-class dentists
                    </div>
                    <div class="slider__first__item__text2">
                        get a brilliant smile for every day
                    </div>
                    <a href="#" class="slider__first__item__text3">
                        get
                    </a>
                    <div class="slider__first__item__arrows"></div>
                </div>
                <div class="slider__first__item__bg">
                </div>
            </div>
        </div>
        <div class="slider__first__item">
            <div class="container">
                <div class="slider__first__item__text">
                    <div class="slider__first__item__text1">
                        Modern technology and expert-class dentists
                    </div>
                    <div class="slider__first__item__text2">
                        get a brilliant smile for every day
                    </div>
                    <a href="#" class="slider__first__item__text3">
                        get
                    </a>
                    <div class="slider__first__item__arrows"></div>
                </div>
                <div class="slider__first__item__bg">
                </div>
            </div>
        </div>
    </div>

Code from JS:

$(function() {

    $('.slider__first').slick({
        autoplay: true,
        zIndex: 2,
        appendArrows: $('.slider__first__item__arrows')
    });
});

Answer 1

appendArrows is not designed to insert buttons inside each slide. do it yourself separately. for example like this: