Слайдер некорректно отображается

Помогите, пожалуйста, разобраться с проблемой при использовании Slick Slider. Когда я пытаюсь создать слайдер, слайды не формируют его, а располагаются вертикально один под другим, выходя за пределы сайта и появляется горизонтальный скролл. Я новичок, возможно, где-то допустила ошибку, но мне трудно ее найти. Буду благодарна за помощь в выявлении и исправлении проблемы.[![скрин кода][1]][1]

html:

<section class="section feedback">
        <div class="container">
          <h2 class="title feedback__title">Отзывы клиентов</h2>

          <div class="feedback__slider">            
            <blockquote class="feedback__item">
                <img class="feedback__img" src="images/reviews/1.jpg" alt="фото клієнта">
                <div class="feedback__content">
                <cite class="feedback__text">
                  SimpleFood - одна из лучших служб доставки продуктов из ресторанов в городе.
                  Очень удобный сайт и приложение. Их доставщики очень вежливы и пунктуальны. 
                  Компания часто проводит акции и дарит скидки на доставку - однозначно рекомендую!
                </cite>
                <p class="feedback__name">Дарья</p>
                <p class="feedback__slogan">Ценитель вкусной еды</p>
                </div>
            </blockquote>

            <blockquote class="feedback__item">
                <img class="feedback__img" src="images/reviews/1.jpg" alt="фото клієнта">
                <div class="feedback__content">
                <cite class="feedback__text">
                  SimpleFood - одна из лучших служб доставки продуктов из ресторанов в городе.
                  Очень удобный сайт и приложение. Их доставщики очень вежливы и пунктуальны. 
                  Компания часто проводит акции и дарит скидки на доставку - однозначно рекомендую!
                </cite>
                <p class="feedback__name">Дарья</p>
                <p class="feedback__slogan">Ценитель вкусной еды</p>
                </div>
            </blockquote>

            <blockquote class="feedback__item">
                <img class="feedback__img" src="images/reviews/1.jpg" alt="фото клієнта">
                <div class="feedback__content">
                <cite class="feedback__text">
                  SimpleFood - одна из лучших служб доставки продуктов из ресторанов в городе.
                  Очень удобный сайт и приложение. Их доставщики очень вежливы и пунктуальны. 
                  Компания часто проводит акции и дарит скидки на доставку - однозначно рекомендую!
                </cite>
                <p class="feedback__name">Дарья</p>
                <p class="feedback__slogan">Ценитель вкусной еды</p>
                </div>
            </blockquote>
           
          </div>
        </div>
      </section>

css:

.feedback {
   &__title {
   margin-bottom: 45px;
   }

   &__item {
    width: 90%;
   display: grid;
   grid-template-columns: 1fr 2fr;
   margin: 0 auto;
   padding-right: 10px;
   }

   &__img {
   border-radius: 50%;
   }

   &__content {
   max-width: 650px;
   width: 100%;
   text-align: left;
   padding: 20px 0;
   }

   &__text {
   display: block;
   font-size: 20px;
   line-height: 1.5;
   color: $color-6;
   margin-bottom: 30px;
   position: relative;
   &::before,
   &::after {
   content: '';
   position: absolute;
   width: 24px;
   height: 20px;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   }

   &::before {
   background-image: url('../images/decor/quotes-down.png');
   top: 0;
   left: -35px;
   }

   &::after {
   background-image: url('../images/decor/quotes.png');
   bottom: 0;
   right: -20px;
   }
   }

   &__name {
   color: $color-1;
   font-size: 20px;
   font-weight: 500;
   margin-bottom: 15px;
   }

   &__slogan {
   font-size: 14px;
   }
   }

js:

$(function () {
    $('.feedback__slider').slick();
});

_libs.scss:

@import '../../node_modules/slick-carousel/slick/slick'

также gulpfile.js

const {src, dest, watch, parallel, series} = require('gulp');

const scss         = require('gulp-sass')(require('sass'));
const concat       = require('gulp-concat');
const autoprefixer = require('gulp-autoprefixer');
const uglify       = require('gulp-uglify');
const imagemin     = require('gulp-imagemin');
const clean        = require('gulp-clean');
const browserSync  = require('browser-sync').create();

function browsersync() {
  browserSync.init({
    server: {
      baseDir: 'app/'
    },
    notofy: false
  })
}

function styles(){
  return src( 'app/scss/style.scss')
    .pipe(scss({outputStyle: 'compressed'}))
    .pipe(concat('style.min.css'))
    .pipe(autoprefixer({
      overrideBrowserslist: ['last 10 versions'],
      grid:true
    }))
    .pipe(dest('app/css'))
    .pipe(browserSync.stream())
}

function scripts() {
  return src([
    'node_modules/jquery/dist/jquery.js',
    'node_modules/slick-carousel/slick/slick.js',
    'app/js/mixitup.min.js',
    'app/js/main.js'
  ])
  .pipe(concat('main.min.js'))
  .pipe(uglify())
  .pipe(dest('app/js'))
  .pipe(browserSync.stream())
}

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 building() {
  return src([
    'app/**/*.html',
    'app/css/style.min.css',
    'app/js/main.min.js'
  ], {base: 'app'})
  .pipe(dest('dist'))
}

function cleanDist() {
  return src('dist') 
   .pipe(clean())
}

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

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

exports.default = parallel(styles, scripts, browsersync, watching);

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