Не работает слайдер, что делать?

Question

[Алексей Яковлев]

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

Answer 1

[Евгений Полинов]

<div class="wrapper">
                    <input type="radio" name="point" id="slide1" checked>
                    <input type="radio" name="point" id="slide2">
                    <input type="radio" name="point" id="slide3">
                    <input type="radio" name="point" id="slide4">
                    <input type="radio" name="point" id="slide5">
                    <div class="slider">
                        <div class="slides slide1"><img src="/src/img/MyCollages (1).jpg" alt=""></div>
                        <div class="slides slide2"><img src="img/MyCollages (2).jpg" alt=""></div>
                        <div class="slides slide3"><img src="/src/img/MyCollages (4).jpg" alt=""></div>
                        <div class="slides slide4"><img src="/src/img/единомышленники.jpg" alt=""></div>
                    </div>	
                    <div class="controls">
                        <label for="slide1"></label>
                        <label for="slide2"></label>
                        <label for="slide3"></label>
                        <label for="slide4"></label>
                    </div>
                </div>

.wrapper
    height: 685px
    margin: 00px auto 0
    position: relative
    width: 920px
    margin-bottom: 40px
.controls
    left: 50%
    margin-left: -108px
    position: absolute
    label
        cursor: pointer
        display: inline-block
        height: 16px
        margin: 25px 12px 0 16px
        position: relative
        width: 16px
        -webkit-border-radius: 50%
        -moz-border-radius: 50%
        -o-border-radius: 50%
        border-radius: 50%
        -webkit-transition: background ease-in-out .5s
        -moz-transition: background ease-in-out .5s
        -o-transition: background ease-in-out .5s
        transition: background ease-in-out .5s
        &:after
            border: 4px solid #fdfdfd
            content: " "
            display: block
            height: 12px
            left: -4px
            position: absolute
            top: -4px
            width: 12px
            -webkit-border-radius: 50%
            -moz-border-radius: 50%
            -o-border-radius: 50%
            border-radius: 50%
        &:hover, 
        #slide1:checked ~ .controls label:nth-of-type(1),
        #slide2:checked ~ .controls label:nth-of-type(2),
        #slide3:checked ~ .controls label:nth-of-type(3),
        #slide4:checked ~ .controls label:nth-of-type(4)
            background: #ffffff

.slider 
    border-radius: 150px
    background-color: #fafafa
    height: inherit
    overflow: hidden
    position: relative
    width: inherit
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .5)
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .5)
    -o-box-shadow: 0 0 20px rgba(0, 0, 0, .5)
    box-shadow: 0 0 20px rgba(0, 0, 0, .5)

.wrapper > input 
    display: none
.slides
    height: inherit
    position: absolute
    width: inherit

.slides
    height: inherit
    opacity: 0
    position: absolute
    width: inherit
    z-index: 0
    -webkit-transform: scale(1.5)
    -moz-transform: scale(1.5)
    -o-transform: scale(1.5)
    transform: scale(1.5)
    -webkit-transition: transform ease-in-out .5s, opacity ease-in-out .5s
    -moz-transition: transform ease-in-out .5s, opacity ease-in-out .5s
    -o-transition: transform ease-in-out .5s, opacity ease-in-out .5s
    transition: transform ease-in-out .5s, opacity ease-in-out .5s


#slide1:checked ~ .slider > .slide1,
#slide2:checked ~ .slider > .slide2,
#slide3:checked ~ .slider > .slide3,
#slide4:checked ~ .slider > .slide4,
#slide5:checked ~ .slider > .slide5
    opacity: 1
    z-index: 1
    -webkit-transform: scale(1)
    -moz-transform: scale(1)
    -o-transform: scale(1)
    transform: scale(1)

как вариант использовать другой слайдер:D