Карусель слайдер на 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%;
}

Правильно ли я делаю разметку для слайдера карусели? Значит вопрос. Мне получается нужно двигать блок .slider-wrapper через transform: translateX(-100% * countPage); countPage - текущий слайд. Как это реализовать на прокрутку колёсика? Т.е прокрутил вниз колесиком слайды перемещаются справа на лево и наоборот если прокрутить вверх т.е обратно. Оффтоп: Можно ли вообще упростить и взять готовую библиотеку подобного слайдера? Только не Jquery, для одной фишки использовать на весь сайт неудобно.