Добрый день! Пытаюсь разобраться с подключением плагина через npm и почему он не работает. Возможно, вы сможете помочь с этим вопросом.
Вот порядок моих действий.
1. установливаю slick-carousel через npm
2. в gulpfile.js добавляю следующий код:
gulp.task('scripts', function () {
return gulp.src([
'node_modules/jquery/dist/jquery.js',
'slick/slick.min.js',
'app/assets/js/common.js',
])
.pipe(concat('libs.js'))
.pipe(gulp.dest('app/assets/js'))
.pipe(sourcemaps.init())
.pipe(uglify())
.pipe(rename({ suffix: '.min' }))
.pipe(sourcemaps.write())
.pipe(gulp.dest('app/assets/js'))
.pipe(browserSync.reload({ stream: true, once: true }));
});
3. в common.js прописываю:
"use strict";
$(document).ready(function(){
$('.slider').slick({
dots: true,
infinite: true,
speed: 100,
slidesToShow: 3,
adaptiveHeight: true
})
});
4. собственно сам html:
<div class="slider">
<div class="slide">
<img src="img/partner1.png" width="500" height="300" alt="Партнер">
</div>
<div class="slide">
<img src="img/partner2.png" width="500" height="300" alt="Партнер">
</div>
<div class="slide">
<img src="img/partner3.png" width="500" height="300" alt="Партнер">
</div>
<div class="slide">
<img src="img/partner4.png" width="500" height="300" alt="Партнер">
</div>
<div class="slide">
<img src="img/partner5.png" width="500" height="300" alt="Партнер">
</div>
</div>
4. также в html в добавляю
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
и перед /body:
<script src="slick/slick.min.js"></script>
<script src="assets/js/common.js"></script>
В итоге ошибок никаких при запуске нет, но и слайдер тоже не отображается.
Буду признательна, если укажите на ошибки или порекомендуете, что почитать на эту тему.
