Multiple image slider

HTML

<button id="backwards">Back</button>
            <button id="forwards">Forwards</button>
            <div class="boxes-container">
                <!-- <div class="chevrons">
                    <i class="fa-solid fa-circle-chevron-left fa-xl chevron" id="forward"></i>
                    <i class="fa-solid fa-circle-chevron-right fa-xl chevron" id="backwards"></i>
                </div> -->
                <div class="boxes">
                    <!-- box 1 -->
                    <div class="box">
                        <div class="img-container">
                            <img src="https://a0.muscache.com/pictures/b6005f78-45e6-403a-bc1d-3351ae83d149.jpg" alt="">
                        </div>
                        <h6>Why host on Airbnb?</h6>
                        <p>Hosts reveal what they love about sharing their space on Airbnb.</p>
                    </div>
                    <!-- box 2 -->
                    <div class="box">
                        <div class="img-container">
                            <img src="https://a0.muscache.com/pictures/9ac19f4a-a59c-47f9-8223-09120b52cd2d.jpg" alt="">
                        </div>
                        <h6>How to get started on Airbnb</h6>
                        <p>From creating your listing to prepping your space, learn how to start hosting.</p>
                    </div>
                    <!-- box 3 -->
                    <div class="box">
                        <div class="img-container">
                            <img src="https://a0.muscache.com/pictures/4d0cc0ed-ad85-4efd-b98e-386d22ab195a.jpg" alt="">
                        </div>
                        <h6>How to earn money on Airbnb</h6>
                        <p>Here's what every Host needs to know about pricing and payouts.</p>
                    </div>
                    <!-- box 4 -->
                    <div class="box">
                        <div class="img-container">
                            <img...

SCSS

@mixin flexCenter($direction) {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: $direction;
}

.boxes-container {
    margin-top: 2rem;
    width: 100%;
    position: relative;
}

$background : null;

.boxes {
    display: flex;
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-behavior: smooth;
    // border: 2px solid red;
    position: relative;

    &::after{
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        
        background: var(--background, $background);
        // background: linear-gradient(90deg,#fff 0%, transparent 10% 85%,#fff 100%);
    }


    &::-webkit-scrollbar {display: none}

    .box {
        @include flexCenter(column);
        align-items: flex-start;
        gap: 1rem;
        width: 332px;
        max-width: 332px;
        cursor: pointer;
        margin-right: 2rem;
        // background-color: green;

        &#last-box {
            padding-right: 2rem;
        }

        .img-container {
            
            img {
                width: 322px;
                max-width: 322px;
                height: 200px;
                object-fit: cover;
                border-radius: 10px;
            }
        }

        h6 {
            font-size: 18px;
        }

        p {
            font-size: 14.5px;
            font-weight: lighter;
            letter-spacing: 0.1px;
        }
    }
}

JavaScript

const boxesView = document.querySelector('.boxes')
const boxes = document.querySelectorAll('.box')

// btns
const forwardBtn = document.querySelector('#forwards')
const backBtn = document.querySelector('#backwards')

boxSize = boxes[0].clientWidth

document.documentElement.style.setProperty('--background', 'linear-gradient(90deg,#fff 0%, transparent 0% 85%,#fff 100%)')


forwardBtn.addEventListener('click', () => {
    boxesView.scrollBy(boxSize , 0)
})

backBtn.addEventListener('click', () => {
    boxesView.scrollBy(-boxSize , 0)
})

boxesView.addEventListener('scroll', () => {
    console.log(boxesView.scrollLeft, 'scroll left')
    document.documentElement.style.setProperty('--background', 'null')

    if (boxesView.scrollLeft === 0) {
        document.documentElement.style.setProperty('--background', 'linear-gradient(90deg,#fff 0%, transparent 0% 85%,#fff 100%)')
        console.log('it is at 0')
    } else if (boxesView.scrollLeft >= 1206) {
        console.log('this is the max')
        document.documentElement.style.setProperty('--background', 'linear-gradient(90deg,#fff 0%, transparent 10% 100%,#fff 100%)')
    } else {
        console.log('middle')
        document.documentElement.style.setProperty('--background', 'linear-gradient(90deg,#fff 0%, transparent 10% 85%,#fff 100%)')
    }
})