Почему slick-slider не правильно работает?

Question

Danya Kozlovskiy @morto

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

CSS
Slick

Почему slick-slider не правильно работает?

Слайдер почему-то работает некорректно: белый экран, при нажатии на кнопку следующего слайда картинка появляется и сразу исчезает, дальше вовсе не работает. Возможно не правильно настроил, подскажите в чем проблема. Пользуюсь gulp'om. slick.scss импортом засунул в файл style.scss в самом начале, а код slick.js скопировал в главный файл js. И после кода из slick.js идет мой код который написан ниже.

HTML:

<slider class="slider">


    <div class="container ">
        <div class="slider__items">

            <div class="slider__inner ">
                <img src="img/img.jpg" alt="" class="slider__img">
                <div class="slider__text">
                    <div class="slider__header">Slide One</div>
                    <div class="slider__words">Lorem ipsum dolor sit amet, malorum recteque reprehendunt ea vel.
                        Urbanitas adolescens vim te, per at tritani aperiri. Adhuc invenire convenire his ea. </div>
                </div>
            </div>
            <div class="slider__inner ">
                <img src="img/img.jpg" alt="" class="slider__img">
                <div class="slider__text">
                    <div class="slider__header">Slide One</div>
                    <div class="slider__words">Lorem ipsum dolor sit amet, malorum recteque reprehendunt ea vel.
                        Urbanitas adolescens vim te, per at tritani aperiri. Adhuc invenire convenire his ea. </div>
                </div>
            </div>
            <div class="slider__inner ">
                <img src="img/img.jpg" alt="" class="slider__img">
                <div class="slider__text">
                    <div class="slider__header">Slide One</div>
                    <div class="slider__words">Lorem ipsum dolor sit amet, malorum recteque reprehendunt ea vel.
                        Urbanitas adolescens vim te, per at tritani aperiri. Adhuc invenire convenire his ea. </div>
                </div>
            </div>
        </div>
    </div>

</slider>

CSS:

.slider__img {
    max-width: 100%;
    height   : auto;
}

// font-family: 'Noto Sans JP', sans-serif;

.slider__inner{
    position: relative;
}

.slider__text {
    width: 415px;
    height: 125px;
   position: absolute;
   
    color: #fff;
    bottom: 0;
    left: 0;
    background-color: rgba(232, 102, 60, 0.7);
    margin-left: 36px;
    margin-bottom: 30px;
}

.slider__header {
    font-size: 25px;
    margin: 15px 15px;
}

.slider__words {
    font-size: 12px;
    font-family: 'Noto Sans JP', sans-serif;
    margin: 0 15px;
}

JS:

$(document).ready(function(){
    $('.slider__items').slick({
        dots: true,
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        adaptiveHeight: true
    });
  });