Не работает slick-carousel в gulp что я делаю не так?

Question

[Viktor-Zaichenko]

не работает slick-carousel в gulp
сам код:

<section class="top-slider">
      <div class="container">
        <div class="top-slider__inner">
          <div class="top-slider__item">
            <div class="top-slider__content">
              <h3 class="top-slider__title">
                SMART AND
                TRENDY
              </h3>
              <p class="top-slider__text">
                Dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
              </p>
              <a class="top-slider__btn" href="#">
                Shop Now
                <span class="top-slider__arrow">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22px"
                    height="9px" viewBox="0 0 22 9" version="1.1">
                    <g>
                      <path
                        d="M 21.597656 4.898438 L 16.097656 7.148438 C 15.558594 7.367188 14.6875 7.367188 14.152344 7.148438 C 13.613281 6.925781 13.613281 6.570312 14.152344 6.351562 L 17.308594 5.0625 L 1.375 5.0625 C 0.613281 5.0625 0 4.8125 0 4.484375 C 0 4.15625 0.613281 3.9375 1.375 3.9375 L 17.308594 3.9375 L 14.15625 2.648438 C 13.617188 2.429688 13.617188 2.070312 14.15625 1.851562 C 14.691406 1.632812 15.5625 1.632812 16.097656 1.851562 L 21.597656 4.101562 C 22.132812 4.324219 22.132812 4.675781 21.597656 4.898438 Z M 21.597656 4.898438 " />
                    </g>
                  </svg>
                </span>
              </a>
            </div>
            <img class="top-slider__img" src="images/slider/foto.png" alt="slider foto">
          </div>

          <div class="top-slider__item">
            <div class="top-slider__content">
              <h3 class="top-slider__title">
                SMART AND
                TRENDY
              </h3>
              <p class="top-slider__text">
                Dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
              </p>
              <a class="top-slider__btn" href="#">
                Shop Now
                <span class="top-slider__arrow">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22px"
                    height="9px" viewBox="0 0 22 9" version="1.1">
                    <g>
                      <path
                        d="M 21.597656 4.898438 L 16.097656 7.148438 C 15.558594 7.367188 14.6875 7.367188 14.152344 7.148438 C 13.613281 6.925781 13.613281 6.570312 14.152344 6.351562 L 17.308594 5.0625 L 1.375 5.0625 C 0.613281 5.0625 0 4.8125 0 4.484375 C 0 4.15625 0.613281 3.9375 1.375 3.9375 L 17.308594 3.9375 L 14.15625 2.648438 C 13.617188 2.429688 13.617188 2.070312 14.15625 1.851562 C 14.691406 1.632812 15.5625 1.632812 16.097656 1.851562 L 21.597656 4.101562 C 22.132812 4.324219 22.132812 4.675781 21.597656 4.898438 Z M 21.597656 4.898438 " />
                    </g>
                  </svg>
                </span>
              </a>
            </div>
            <img class="top-slider__img" src="images/slider/foto.png" alt="slider foto">
          </div>

          <div class="top-slider__item">
            <div class="top-slider__content">
              <h3 class="top-slider__title">
                SMART AND
                TRENDY
              </h3>
              <p class="top-slider__text">
                Dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
              </p>
              <a class="top-slider__btn" href="#">
                Shop Now
                <span class="top-slider__arrow">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22px"
                    height="9px" viewBox="0 0 22 9" version="1.1">
                    <g>
                      <path
                        d="M 21.597656 4.898438 L 16.097656 7.148438 C 15.558594 7.367188 14.6875 7.367188 14.152344 7.148438 C 13.613281 6.925781 13.613281 6.570312 14.152344 6.351562 L 17.308594 5.0625 L 1.375 5.0625 C 0.613281 5.0625 0 4.8125 0 4.484375 C 0 4.15625 0.613281 3.9375 1.375 3.9375 L 17.308594 3.9375 L 14.15625 2.648438 C 13.617188 2.429688 13.617188 2.070312 14.15625 1.851562 C 14.691406 1.632812 15.5625 1.632812 16.097656 1.851562 L 21.597656 4.101562 C 22.132812 4.324219 22.132812 4.675781 21.597656 4.898438 Z M 21.597656 4.898438 " />
            
        </g>
                  </svg>
                </span>
              </a>
            </div>
            <img class="top-slider__img" src="images/slider/foto.png" alt="slider foto">
          </div>

        </div>
      </div>
    </section>

скачал slick-carousel через npm i --save-dev slick-carousel

В gulpfile.js прописал:

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

В stele.scss прописал:
@import 'libs';

В папке scss создал файл _libs.scss и прописал туда:

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

В файле main.js прописал:

$(function () {
  $('.top-slider__inner').slick({

  });
});

И слайдер не работает, подскажите что не так.

Comments

[Natebash]

Поместите код в песочницу, и выложите песочницу вот сюда. Как пример песочницы - codepen

[Viktor-Zaichenko]

Natebash,

https://codepen.io/viktor-zaichenko/pen/dydBMmb