Подключила slick-carousel к проекту, а он неправильно работает. Пропадает, появляется, скроллит по всей страничке. HELP

Решила я значит, по марафону на ютубе попробовать проект на gulp, но что-то пошло не так. Пропадает, появляется, скроллит по всей страничке. И вместо двух дивов которые в него вложены появилось вдоль первой картинки вертикально ещё пять картинок.
У автора видео всё работает, у нас код идентичен. У меня же всё багано. Вы моя последняя надежда, прошу помогите.

const { src, dest, watch, parallel, series } = require('gulp');
const scss = require('gulp-sass');
const concat = require('gulp-concat');
const browserSync = require('browser-sync').create();
const uglify = require('gulp-uglify-es').default;
const autoprefixer = require('gulp-autoprefixer');
const imagemin = require('gulp-imagemin');
const del = require('del');

function browsersync(){
    browserSync.init({
        server: {
            baseDir: 'app/'
        }
    });
}
function cleanDist(){
    return del('dist')
}
function images(){
    return src('app/images/**/*')
    .pipe(imagemin(
        [
            imagemin.gifsicle({interlaced: true}),
            imagemin.mozjpeg({quality: 75, progressive: true}),
            imagemin.optipng({optimizationLevel: 5}),
            imagemin.svgo({
                plugins: [
                    {removeViewBox: true},
                    {cleanupIDs: false}
                ]
            })
        ]
    ))
    .pipe(dest('dist/images'))
}
function scripts(){
    return src([
        'node_modules/jquery/dist/jquery.js',
        'node_modules/slick-carousel/slick/slick.js',
        'app/js/main.js'
    ])
    .pipe(concat('libs.min.js'))
    .pipe(uglify())
    .pipe(dest('app/js'))
    .pipe(browserSync.stream())
}

function styles(){
    return src('app/scss/style.scss')
    .pipe(scss({outputStyle: 'compressed'}))
    .pipe(concat('style.min.css'))
    .pipe(autoprefixer({
        overrideBrowserslist: ['last 10 version'],
        grid: true
    }))
    .pipe(dest('app/css'))
    .pipe(browserSync.stream())
}
function build(){
    return src([
        'app/css/style.min.css',
        'app/fonts/**/*',
        'app/js/libs.min.js',
        'app/*.html'
    ],{base: 'app'})
    .pipe(dest('dist'))
}

function watching(){
    watch(['app/scss/**/*.scss'], styles);
    watch(['app/js/**/*.js','!app/js/libs.min.js'], scripts);
    watch(['app/*.html']).on('change', browserSync.reload)
}


exports.styles = styles;
exports.watching = watching;
exports.browsersync = browsersync;
exports.scripts = scripts;
exports.images = images;
exports.cleanDist = cleanDist;

exports.build = series(cleanDist, images, build);
exports.default = parallel(styles,scripts,browsersync, watching);

Пропадает, появляется, скроллит по всей страничке и т.д. Вместо двух div с изображениями, их появляется шесть которые выстроены вдоль вертикально.

$(function (){
     $('.products__slider').not('.slick-initialized').slick({
         prevArrow: '<button class="slider-btn slider-btn__left"><img src="./images/arrow-left.svg" alt=""></button>',
         nextArrow: '<button class="slider-btn slider-btn__right"><img src="./images/arrow-right.svg" alt=""></button>'
     }); 
    });
.products{
    &__inner{
        display: flex;
        justify-content: space-between;
        padding-left: 50px;
    }
    &__text{
        max-width: 440px;
        p{
            margin-bottom: 30px;
        }
    }
    &__slider-box{
        position: relative;
        padding-top: 110px;
    }
    &__slider-text{
        width: 285px;
        position: absolute;
        text-align: right;
        font-size: 24px;
        line-height: 28px;
        @extend %ubuntu-medium;
        bottom: 30px;
        left: -250px;
        z-index: 5;
    }
    &__slider{
        max-width: 560px;
    }
}
<section id="products" class="page-section products">
    <div class="page-section__wrapper">
      <div class="container">
        <h3 class="title products__title">Что такое Mavic 2 Pro?</h3>
        <div class="products__inner">
          <div class="products__text">
            <p>
              Дрон Mavic 2 Pro - это инженерное чудо, идеальное для
              аэросъемки. Дрон обладает всеми лучшими технологиями DJI, он
              преобразит мир аэросъемки.
            </p>
            <p>
              Mavic 2 Pro оснащен совершенно новой камерой Hasselblad L1D-20c.
              Камера L1D-20c работает по уникальной технологии Hasselblad
              Natural Colour Solution (HNCS)5, позволяющей пользователям
              делать великолепные снимки с воздуха с разрешением в 20
              мегапикселей и потрясающими цветами.
            </p>
          </div>
          <div class="products__slider-box">
            <p class="products__slider-text">
              Лучшая беспилотная технология аэросъемки
            </p>
            <div class="products__slider">
              <div class="products__slider-item">
                <img class="products__slider-img" src="./images/slider.jpg" alt="" />
              </div>
              <div class="products__slider-item">
                <img class="products__slider-img" src="./images/slider.jpg" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="scroll__btn">
        <a href="#benefits">
          <img src="./images/arrow-down.svg" alt="" />
        </a>
      </div>
    </div>
  </section>


Ответы (0 шт):