Подключила 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>