The slider does not work, what should I do?

Question

JavaScript

html:

<div class="block-slider">
        <div class="block-slider__container">
            <div class="block-slider__product">
                <img src="../src/img/default/2020fd612ddda7c2361f6007fd6d440a.png" alt="product" class="block-slider__product-img">
                <div class="block-slider__product-title">JW Anderson</div>
                <p class="block-slider__product-description">NET-A-PORTER</p>
                <span class="block-slider__product-price">125 Aed</span>
            </div>
            <div class="block-slider__product">
                <img src="../src/img/default/4359b6e39805e069b9341402d1a7522a.png" alt="product" class="block-slider__product-img">
                <div class="block-slider__product-title">JW Anderson</div>
                <p class="block-slider__product-description">NET-A-PORTER</p>
                <span class="block-slider__product-price">125 Aed</span>
            </div>
            <div class="block-slider__product">
                <img src="../src/img/default/b2cb268963c1dbdaf6084064c701c0a1.png" alt="product" class="block-slider__product-img">
                <div class="block-slider__product-title">JW Anderson</div>
                <p class="block-slider__product-description">NET-A-PORTER</p>
                <span class="block-slider__product-price">125 Aed</span>
            </div>
            <div class="block-slider__product">
                <img src="../src/img/default/7904c14107cbfbac819e4ed58d48c7ff.png" alt="product" class="block-slider__product-img">
                <div class="block-slider__product-title">JW Anderson</div>
                <p class="block-slider__product-description">NET-A-PORTER</p>
                <span class="block-slider__product-price">125 Aed</span>
            </div>
        </div>
    </div>

js:

import './styles/style.sass';
import * as $ from 'jquery';
import './slick';

$('.block-slider__container').slick({
    dots: true,
    infinite: false,
    speed: 300,
    slidesToShow: 4,
    slidesToScroll: 4,
    responsive: [
        {
        breakpoint: 1024,
        settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
            infinite: true,
            dots: true
        }
        },
        {
        breakpoint: 600,
        settings: {
            slidesToShow: 2,
            slidesToScroll: 2
        }
        },
        {
        breakpoint: 480,
        settings: {
            slidesToShow: 1,
            slidesToScroll: 1
        }
        }
    ]
});

sass:

.block-slider
    max-width: 1600px
    height: 550px
    display: block
    margin: 0 auto
    margin-top: 80px
    background-image: url('../img/default/Rectangle2144.png')
    padding: 50px

    &__container
        margin: 0 auto
        width: 1000px
        display: flex
        justify-content: space-between