Как подключить slick slider?

Question

[Anna]

Добрый день! Пытаюсь разобраться с подключением плагина через 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>

В итоге ошибок никаких при запуске нет, но и слайдер тоже не отображается.
Буду признательна, если укажите на ошибки или порекомендуете, что почитать на эту тему.

Comments

[Kovalsky]

Элемент $('.slider') существует перед инициализацией?

[Hyubert]

Gulp вам конкатенирует файли в одим, минифицирует и прописивает суффикс. По этому подключайте не <script src="slick/slick.min.js"></script>, а <script src="assets/js/libs.min.js"></script>, и <script src="assets/js/common.js"></script> удалите

Answer 1

[alvvi]

['node_modules/jquery/dist/jquery.js',
'node_modules/slick/slick.min.js']

node_modules забыли.
и не совсем ясно, зачем у вас тут common.js, ведь вы его потом в .html отдельно подключаете. Либо оставьте тут и уберите из .html, либо уберите отсюда и оставьте только в .html

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<script src="slick/slick.min.js"></script>

А у вас рядом с .html файлом есть директория slick, в которой лежит slick.css и slick.js? Тогда какой смысл установки через npm и конкатенации всего этого в libs.js? (:

Должно быть:
<script src="assets/js/libs.js"></script>
ну и стили соответственно нужно тоже отдельно подтянуть из node_modules и конкатенировать в какой-нибудь libs.css.

Почитать можно Gulp for Beginners, а потом посмотреть вот этот скринкаст и постараться понять как можно больше

Answer 2

[al3ch5]

Если Вы подключаете Slick slider через npm, то соответственно он будет находится в папке с npm модулями, а не в slick/slick.min.js. И Вам необходимо подключить lib.js, если вы используете gulp для конкатенации и других действий.