Carousel slider on JS

HTML

<div class="slider">
 <div class="slider-wrapper">
  <section class="slider-item"></section>
<section class="slider-item"></section>
<section class="slider-item"></section>
 </div>
</div>

CSS

.slider {
 overflow: hidden;
 width: 100%;
 height: 100vh;
}
.slider-wrapper {
 display: flex;
 transition: .3s;
}
.slider-item {
 flex: 0 0 100%;
 max-width: 100%;
}

Am I doing the markup for the carousel slider correctly? So it's a question. I just need to move the block .slider-wrapper via transform: translateX(-100% * countPage); countPage - the current slide. How to implement this on the scroll wheel? Ie scrolled down the wheel slides move from right to left and vice versa if you scroll up ie back. Offtop: Is it even possible to simplify and take a ready-made library? the slider? Just not Jquery, for one chip to use the entire site is inconvenient.