@morto

Почему 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
    });
  });
  • Вопрос задан
  • 63 просмотра
Решения вопроса 1
@morto Автор вопроса
Проблема была в том что я не подключил slick-theme.css...
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@kryamk
Возможно ошибка в этой строке: // font-family: 'Noto Sans JP', sans-serif;
Комметировать нужно так: /* font-family: 'Noto Sans JP', sans-serif; */
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы