Почему не работает slick slider в gulp проекте?

Question

[malayamarisha]

Доброго времени суток!
Пытаюсь подключить slick slider в gulp.
1. Устанавливаю пакет
npm i slick-carousel
2. В package.js информация что пакет установлен
"slick-carousel": "^1.8.1"
3. В gulpfile.js прописан task чтобы slick-carousel прописывался в libs.min.js

gulp.task('js', function () {
    return gulp.src([
        'node_modules/slick-carousel/slick/slick.js',
        'node_modules/magnific-popup/dist/jquery.magnific-popup.js'
    ])
        .pipe(concat('libs.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('app/js'))
})

4. В styles.scss slick-carousel также прописан
"../../node_modules/slick-carousel/slick/slick";
5. Перед /body

<script src="/js/jquery.min.js"></script>
<script src="/js/libs.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>

6. На главной размещаю баннер

<div class="slider fade slick-initialized slick-slider slick-dotted" role="toolbar">
        <button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button"
                style="display: block;">Previous
        </button>
        <div aria-live="polite" class="slick-list draggable">
            <div class="slick-track" style="opacity: 1; width: 1680px;" role="listbox">
                <div class="slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false"
                     style="width: 560px; position: relative; left: 0px; top: 0px; z-index: 999; opacity: 1;"
                     tabindex="-1" role="option" aria-describedby="slick-slide90">
                    <div class="image">
                        <img src="/images/banner1.jpg">
                    </div>
                </div>
                <div class="slick-slide" data-slick-index="1" aria-hidden="true"
                     style="width: 560px; position: relative; left: -560px; top: 0px; z-index: 998; opacity: 0;"
                     tabindex="-1" role="option" aria-describedby="slick-slide91">
                    <div class="image">
                        <img src="/images/banner2.jpg">
                    </div>
                </div>
                <div class="slick-slide" data-slick-index="2" aria-hidden="true"
                     style="width: 560px; position: relative; left: -1120px; top: 0px; z-index: 998; opacity: 0;"
                     tabindex="-1" role="option" aria-describedby="slick-slide92">
                    <div class="image">
                        <img src="/images/banner1.jpg">
                    </div>
                </div>
            </div>
        </div>

        <button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button"
                style="display: block;">Next
        </button>
    </div>

Изначально, картинок не видно, т.к. перебивают слили bootstrap

.fade:not(.show) {
  opacity: 0;
}

Меняю на

.fade:not(.show) {
  opacity: 1;
}

Картинка отображается, но кнопки "Previos" и "Next" не работают. Ощущение что js не подключился, но в консоли ошибок нет.
Помогите, пожалуйста, разобраться.

Comments

[Сергей delphinpro]

Вы прямо в таком виде пишете html?
Не нужно. Слик сам создаст нужную разметку.
А класс slick-initialized сигнализирует, что на этом элементе слик уже инициализирован.
Посмотрите документацию, там должна быть простая структура.

<div class="slider">
  <div><img></div>
  <div><img></div>
  <div><img></div>
</div>

Кнопки, если вы размещаете их самостоятельно в html, нужно явным образом привязывать к слайдеру при инициализации. Об этом тоже смотрите в документации.

[malayamarisha]

Вы прямо в таком виде пишете html?
Не нужно. Слик сам создаст нужную разметку.
А класс slick-initialized сигнализирует, что на этом элементе слик уже инициализирован.

- спасибо Вам огромное )
Точно, нужно же ведь просто структуру

Кнопки, если вы размещаете их самостоятельно в html, нужно явным образом привязывать к слайдеру при инициализации. Об этом тоже смотрите в документации.

- точно, можно так:

$('.fade').slick({
    dots: true,
    infinite: true,
    speed: 500,
    fade: true,
    cssEase: 'linear',
    prevArrow: '<div class="prev__banner"></div>',
    nextArrow: '<div class="next_banner"></div>',
});

.prev__banner
{
  width:20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 0px;
  margin-top: -10px;
  background: #f00;
  z-index: 1;
}
.next_banner
{
  width:20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 0px;
  margin-top: -10px;
  background: #f00;
  z-index: 1;
}