Slick-slider doesn't work, what's wrong?

Question

css

index.html

<section class="top-slider">
        <div class="contanier">
          <div class="top-slider__inner">
            <div class="top-slider__item">
              <div class="top-slider__content">
                <h3 class="top-slider__title">
                  New Season
                  New Brand Collection
                </h3>
                <p class="top-slider__tixt">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do et dolore magna aliqua. Ipsum.
                </p>
                <a  class="top-slider__link" href="#">
                  BUY NOW

                </a>

              </div>
              <img class="top-slider__img" src="app/images/slider/foto.png" alt="slide images">
            </div>
            <div class="top-slider__item">
              <div class="top-slider__content">
                <h3 class="top-slider__title">
                  New Season
                  New Brand Collection
                </h3>
                <p class="top-slider__tixt">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do et dolore magna aliqua. Ipsum.
                </p>
                <a  class="top-slider__link" href="#">
                  BUY NOW

                </a>

              </div>
              <img class="top-slider__img" src="app/images/slider/foto.png" alt="slide images">

            </div>
            <div class="top-slider__item">
              <div class="top-slider__content">
                <h3 class="top-slider__title">
                  New Season
                  New Brand Collection
                </h3>
                <p class="top-slider__tixt">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do et dolore magna aliqua. Ipsum.
                </p>
                <a  class="top-slider__link" href="#">
                  BUY NOW

                </a>

              </div>
              <img class="top-slider__img" src="app/images/slider/foto.png" alt="slide images">

            </div>
            <div class="top-slider__item">
              <div class="top-slider__content">
                <h3 class="top-slider__title">
                  New Season
                  New Brand Collection
                </h3>
                <p class="top-slider__tixt">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do et dolore magna aliqua. Ipsum.
                </p>
                <a  class="top-slider__link" href="#">
                  BUY NOW

                </a>

              </div>
              <img class="top-slider__img" src="app/images/slider/foto.png" alt="slide images">

            </div>
          </div>

        </div>
      </section>

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());
  
}

main.js

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

_libs.scss

Dmitrijs Balcers '../../node_modules/slick-carousel/slick/slick.scss'

@import "vars";
@import "fonts";
@import "reset";
@import "libs";
@import "global";

what is the problem I can’t understand 2 times on the tutorial I redo it and still slick does not work

in index.html slic did not connect in the lesson so it works for me for some reason not