I am trying to make multiple sections each having a slider at a different speed, there are 3 but the cursor controls only controls 1

Question

I have multiple sections (10 in total) but for the example we can show 3. They are slick.js carousels, and when I am on 50% on the section the sliders shows a left arrow and vice-versa but this cursor that is custom, seems to only control one or all the sliders not the focussed one uniquely, so I wanted to know if you had any solutions?

CSS

        @font-face {
            font-family: 'saplatte-sans';
            src: url('/src/fonts/SaplatteSans-Extended.woff2') format('woff2');
            font-weight: normal;
            font-style: normal;
        }

        *,
        ::after,
        ::before {
            box-sizing: border-box;
            border: 0;
        }

        body,
        html {
            margin: 0;
            padding: 0;
        }

        body {
            font-family: "saplatte-sans";
            height: 100vh;
        }

        h1 {
            font-size: 3rem;
            font-weight: normal;
            font-style: normal;
            color: rgb(255, 255, 255);
            z-index: 999;
            mix-blend-mode: exclusion;
        }

        .navbar {
            backdrop-filter: blur(10px);
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            height: 60px;
        }

        .navbar-brand {
            color: red;
            font-weight: bold;
        }

        .navbar-nav .nav-link {
            color: red !important;
            transition: opacity 0.5s;
        }

        .navbar-nav .nav-link:hover {
            opacity: 0.7;
        }

        section {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: #fff;
            font-size: 36px;
            position: relative;
        }

        .slider, .sliders, .sliderss {
            width: 100%;
            height: 100vh;
            position: relative;
        }

        .slider .slide, .sliders .slide, .sliderss .slide {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            background-size: cover;
            background-position: center;
        }

        .left-half, .right-half {
            position: absolute;
            top: 0;
            width: 50%;
            height: 100%;
            z-index: 10;
        }

        .left-half {
            left: 0;
            cursor: url('arrow.png'), auto;
        }

        .right-half {
            right: 0;
            cursor: url('arrowright.png'), auto;
        }

        footer {
            background: #000;
            color: #fff;
            text-align: center;
            padding: 20px;
            width: 100%;
            bottom: 0;
            vertical-align: center;
            object-position: center;
        }

        .marquee {
            display: block;
            overflow: hidden;
            white-space: nowrap;
            box-sizing: border-box;
        }

        .marquee span {
            display: inline-block;
            padding-left: 100%;
            animation: marquee 15s linear infinite;
        }

        @keyframes marquee {
            0% {
                transform: translate(0, 0);
            }

            100% {
                transform: translate(-100%, 0);
            }
        }

        .sitemap {
            background: #000;
            color: #fff;
            text-align: center;
            vertical-align: center;
            object-position: center;
        }

        a {
            all: unset;
        }

HTML

    <div class="slick-slider">
        <div class="slider slider-one">
            <div class="slide" style="background-image: url('/src/img/additiv_apparel_photography_4.jpg');  background-attachment: fixed;background-position: center center;">
                <div class="center">
                    <h1>additiv apparel</h1>
                </div>
            </div>
            <!-- Add more slides as needed -->
            <div class="slide" style="background-image: url('/src/img/additiv_apparel_photography.jpg');  background-attachment: fixed;background-position: center center;">
                <div class="center">
                    <h1>additiv apparel</h1>
                </div>
            </div>
            <!-- Add more slides as needed -->
        </div>
        <div class="left-half left-one"></div>
        <div class="right-half right-one"></div>

        <div class="sliders slider-two">
            <div class="slide" style="background-image: url('/src/img/additiv_apparel_photography_2.jpg');">
                <div class="center">
                    <h1>additiv apparel</h1>
                </div>
            </div>
            <div class="slide" style="background-image: url('/src/img/additiv_apparel_photography.png');">
                <div class="center">
                    <h1>Saplatte Sans</h1>
                </div>
            </div>
            <!-- Add more slides as needed -->
        </div>
        <div class="left-half left-two"></div>
        <div class="right-half right-two"></div>

        <div class="sliderss slider-three">
            <div class="slide" style="background-image: url('/src/img/ERACOM_diploma_c6fa6d40859663.578fdcb7b9696.jpg');">
                <div class="center">
                    <h1>Diploma ERACOM</h1>
                </div>
            </div>
            <!-- Add more slides as needed -->
            <div class="slide" style="background-image: url('/src/img/ERACOM_diploma_3D.png');">
                <div class="center">
                    <h1>Diploma ERACOM</h1>
                </div>
            </div>
            <!-- Add more slides as needed -->
        </div>
        <div class="left-half left-three"></div>
        <div class="right-half right-three"></div>
    </div>

    <footer class="position:fixed;bottom:0;">
        <div class="sitemap">
            <span>Ambamaba Studio | Home | Services | Projects | Typography | Contact</span>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/slick-carousel/slick/slick.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

JS

    <script>
        $(document).ready(function() {
            $('.slider-one').slick({
                infinite: true,
                slidesToShow: 1,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 2000,
                dots: false,
                arrows: false,
            });

            $('.slider-two').slick({
                infinite: true,
                slidesToShow: 1,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 1000,
                dots: false,
                arrows: false,
            });

            $('.slider-three').slick({
                infinite: true,
                slidesToShow: 1,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 3000,
                dots: false,
                arrows: false,
            });

            $('.left-one').on('click', function() {
                $('.slider-one').slick('slickPrev');
            });

            $('.right-one').on('click', function() {
                $('.slider-one').slick('slickNext');
            });

            $('.left-two').on('click', function() {
                $('.slider-two').slick('slickPrev');
            });

            $('.right-two').on('click', function() {
                $('.slider-two').slick('slickNext');
            });

            $('.left-three').on('click', function() {
                $('.slider-three').slick('slickPrev');
            });

            $('.right-three').on('click', function() {
                $('.slider-three').slick('slickNext');
            });
        });
    </script>

I tried moving the classes, adding in jquery and also making a loop but didn't work.

 $('.left-one').on('click', function() {
                $('.slider-one').slick('slickPrev');
            });

            $('.right-one').on('click', function() {
                $('.slider-one').slick('slickNext');
            });

            $('.left-two').on('click', function() {
                $('.slider-two').slick('slickPrev');
            });

            $('.right-two').on('click', function() {
                $('.slider-two').slick('slickNext');
            });

            $('.left-three').on('click', function() {
                $('.slider-three').slick('slickPrev');
            });

            $('.right-three').on('click', function() {
                $('.slider-three').slick('slickNext');
            });

Dosen't work nor this :

     $('.left-half').on('click', function() {
                $(this).siblings('.slider').slick('slickPrev');
            });

            $('.right-half').on('click', function() {
                $(this).siblings('.slider').slick('slickNext');
            });