Слайдер некорректно отображается
Помогите, пожалуйста, разобраться с проблемой при использовании 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);