Как починить слайдер

Сделал стандартный слайдер с переходами, но эти переходы идут не внутри контейнера, а перелистывают весь сайт вправо. Как это исправить?

const slider = document.querySelector('.slider');
const prevBtn = document.querySelector('.prev-slide');
const nextBtn = document.querySelector('.next-slide');

let slidePosition = 0;
const slides = slider.querySelectorAll('.slide');
const totalSlides = slides.length;

prevBtn.addEventListener('click', () => {
   slidePosition--;
   if (slidePosition < 0) {
      slidePosition = totalSlides - 1;
   }
   updateSliderPosition();
});

nextBtn.addEventListener('click', () => {
   slidePosition++;
   if (slidePosition > totalSlides - 1) {
     slidePosition = 0;
   }
   updateSliderPosition();
});

function updateSliderPosition() {
  slider.style.transform = `translateX(-${slidePosition * slides[0].clientWidth}px)`;
}



    <div class="slider-container">
    <section class="slider">
        <div class="first-vebinar slide">
            <div class="backblock">
                <p>Стандарный вебинар</p>
            </div>
            <div class="mainblock">
                <ul>
                    <li>Lorem ipsum dolor sit.</li>
                    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                    <li>Lorem ipsum dolor sit amet consectetur.</li>
                    <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error, obcaecati?</li>
                </ul>
            </div>
        </div>
        <div class="sec-vebinar slide">
            <div class="second backblock">
                <p>Индивидуальное занятие</p>
            </div>
            <div class="mainblock">
                <ul>
                    <li>Lorem ipsum dolor sit amet.</li>
                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
                    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, deleniti.</li>
                    <li>Lorem ipsum dolor sit amet.</li>
                </ul>
            </div>
        </div>
        <div class="third-vebinar slide">
            <div class="third backblock">
                <p>Тета-хиллинг <br> Индивидуальное</p>
            </div>
            <div class="mainblock">
                <ul>
                    <li>Lorem ipsum dolor sit.</li>
                    <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
                    <li>Lorem, ipsum dolor.</li>
                    <li>Lorem ipsum dolor sit amet consectetur adipisicing.</li>
                </ul>
            </div>
        </div>
        <div class="prev-slide">
            <svg width="80" height="80" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="75" cy="75" r="73.5" stroke="white" stroke-width="3"/>
                <path d="M43 75.5L91.75 47.3542V103.646L43 75.5Z" fill="#FFFFFF"/>
            </svg>
        </div>
        <div class="next-slide">
            <svg width="80" height="80" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="75" cy="75" r="73.5" stroke="white" stroke-width="3"/>
                <path d="M108 75.5L59.25 103.646V47.3542L108 75.5Z" fill="#FFFFFF"/>
            </svg> 
        </div>
    </section>
</div>



.slider-container {
position: relative;
width: 100%;
overflow: hidden;
}

.prev-slide {
position: absolute;
left: 30px;
top: 40svh;
cursor: pointer;
}

.next-slide {
position: absolute;
right: 30px;
top: 40svh;
cursor: pointer;
}

.prev-slide:hover,
.next-slide:hover {
transform: scale(1.1);
}

.slider {
display: flex;
transition: transform 500ms ease-in-out;
}

.slide {
width: 100%;
height: 100svh;
}

.backblock {
position: absolute;
background-color: #6769f4ad;
height: 30rem;
width: 20rem;
border-radius: 10%;
margin-left: 15rem;
margin-top: 5rem;
}

.backblock > p {
writing-mode: vertical-rl;
rotate: 180deg;
color: #ffffff;
font-size: 42px;
font-weight: 600;
font-family: Arial, Helvetica, sans-serif;
margin: 2rem;
opacity: 0.6;
}

.mainblock {
position: absolute;
background-color: #626262;  
opacity: 0.95;
height: 23rem;
width: 35rem;
margin-top: 11rem;
margin-left: 25rem;
border-radius: 10%;
}

.mainblock > ul {
list-style: none;
}

.mainblock > ul > li {
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
margin: 2rem;
line-height: 30px;
}

.second {
background-color: #fe0000b5;
}

.third {
background-color: #f7e32bcf;
}