Title: Slider items overlapping when using translateX in JavaScript

[Problem Image][1]I’m creating a slider with multiple pages. It appears fine when using CSS alone, but when I add JavaScript to translate the slider-wrapper to -100vw, the images and divs within each slider-item start overlapping. I’d like to have each slider-item move smoothly to the left by -100vw (for the first item), -200vw (for the second item), and so on. However, the content inside each slider-item does not stay positioned correctly.

this is html section
<!-- Slider Section -->
    <div class="slider">
        <div class="slider-wrapper">
        <div class="slider-item">
        <img class="slider-images" src="templates/Monitor1.png">
        <div class="slider-bg"></div>
        <h1 class="SliderTitle">Apple Studio Display</h1>
        <h2 class="SliderPrice">60000INR</h2>
        <button class="Buy-Now">BUY NOW</button>
        </div>
        <div class="slider-item">
            <img clas="slider-images" src="templates/Monitor1.png">
            <div class="slider-bg"></div>
            <h1 class="SliderTitle">Apple Studio Display</h1>
            <div class="sliderPriceBG"><h2 class="SliderPrice">60000INR</h2></div>
            <button class="Buy-Now">BUY NOW</button>
        </div>
        <div class="slider-item">
            <img src="templates/Monitor1.png">
            <div class="slider-bg"></div>
            <h1 class="SliderTitle">Apple Studio Display</h1>
            <h2 class="SliderPrice">60000INR</h2>
            <button class="Buy-Now">BUY NOW</button>
        </div>
        <div class="slider-item">
            <img src="templates/Monitor1.png">
            <div class="slider-bg"></div>
            <h1 class="SliderTitle">Apple Studio Display</h1>
            <h2 class="SliderPrice">60000INR</h2>
            <button class="Buy-Now">BUY NOW</button>
        </div>
        <div class="slider-item">
            <img src="templates/Monitor1.png">
            <div class="slider-bg"></div>
            <h1 class="SliderTitle">Apple Studio Display</h1>
            <h2 class="SliderPrice">60000INR</h2>
            <button class="Buy-Now">BUY NOW</button>
        </div>
    </div>

This is CSS section

.slider{
    background-image: url("templates/Background/Slider_Background_2.jpg");
    /*clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);*/
}

.slider-wrapper{
    display: flex;
    width: 500vw;
    position: relative;
}

.slider-item{
    width: 100vw;
    display: flex;
    justify-content: center;
    position: relative;
    align-items: center;
}
.slider-images{
    position: absolute;
    left: 3%;
    
}

.SliderTitle{
    position:absolute;
    top:27%;
    right:13%;
    font-size: 48px;
    font-weight: 900;
    text-align: center;
    color: #2C3E50;
}

.slider-bg{
    height: 500px;
    width: 550px;
    top: 20%;
    background-color: #f5f5dc;
    position: absolute;
    clip-path: circle(50% at 50% 50%);
    right: 10%;
}

.SliderPrice{
    position: absolute;
    right: 21%;
    color: #001A3F;
    top: 40%;
    font-size: 32px;
    background-color: green;
    border-radius: 10px;
    width: 150px;
    height: 50px;
}

.Buy-Now{
    position: absolute;
    right: 21%;
    top: 55%;
    font-size: 31px;
    border-radius: 33px;
    background-color: blue;
}```

This is JS section which is giving error after insertion



const wrapper = document.querySelector('.slider-wrapper');
wrapper.style.transform="translateX(-100vw)"


I have overflow: hidden on the .slider container to prevent elements from overflowing, but the images and divs inside each slider-item don’t seem to stay aligned when I translate the slider-wrapper.
My Goal: To have each slider-item move to the left smoothly without overlapping or losing alignment. Any ideas on what might be causing this issue or how I can fix it?

  [1]: https://i.sstatic.net/V0MAX7Zt.png