Почему Slick-slider не переключает слайды?

Question

Danya Kozlovskiy @morto

вечный ученик

Почему Slick-slider не переключает слайды?

Подключил slick-slider, поместил его внутрь контейнера и настроил по своим прихотям. Но, как только я его подключил, т.е. еще не настраивал, у меня не работала кнопка previous (предыдущий слайд), в результате получил такую вещь: кнопки на первых двух слайдах не работают, а на третьем (последнем) они решают все-таки, что пора за дело. В коде возможны бесполезные селекторы, классы и т.д.

Код из 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>

Код из JS:

$(function() {

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