Why doesn't slick slider work in gulp project?

Question

Slick

Good day!
I'm trying to include slick slider in gulp.
1. I install the
npm i slick-carousel package
2. In package.js, the information that the package is installed
"slick-carousel": "^1.8.1"
3. The task is written in gulpfile.js so that slick-carousel is registered in 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 also contains
"../../node_modules/slick-carousel/slick/slick";
5. Before /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. I place a banner on the main page

<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>

Initially, the pictures are not visible, because. heckle leaked bootstrap

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

I change to

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

The picture is displayed, but the "Previos" and "Next" buttons do not work. Feeling that js is not connected, but there are no errors in the console.
Help, please, to understand.