Подскажите, что делаю не так? вот код
--- Пытаетесь изобрести велосипед )
1. Создайте класс Slaider. Можно старым или новым способом. Function slider или class Slider. С чем более удобнее работать.
2. У вашего бедующего объекта должны быть параметры, el - элемент с дочерними слайдами, и nextEl, prevEl, логика думаю понятна. Для того чтобы вы могли его инициализировать несколько раз и использовать как библиотеку .
const myslider = new Slider({el: '.classNameDomEl', nextEl:'',prevEl:""})
myslider.run()
3. Вы должны собрать массив ваших слайдов из дочерних элементов блока el. Кнопками вы можете менять индекс текущего слайда и вешать на блок активного слайда класс active.
4. Помимо вешания класса active вы должны определить какой будет анимация смены слайда, если это карусель то смотрите в сторону transform: translateX. Это css, желательно это реализовать на стороне JS
5. Если вы будете реализововать 4 пункт на стороне JS тогда ваши слайды надо будет расположить горизонтально в левую сторону и при смене слайда смешать все блоки справа на лево через translateX. Расположение по умолчанию можно реализовать на CSS. Остальной функционал на JS
6. Не забудьте для блока el сделать owerflow:hidden чтобы скрыть элементы которые не должны попадать в поле видимости