JS Slider для изображений - Есть ли более простой способ сделать это?

Question

Я смог сделать эту работу, но я считаю, что сделал ее здесь действительно грязной.Мне было интересно, есть ли более простой способ сделать это.Я прошу в целях обучения.

Fetch извлекает объекты json, и у объектов есть массив изображений, а затем заполняет содержимое в своих собственных контейнерах изображениями.Я пытался заставить его переключаться между изображениями кнопками prev и next.

Каждый контейнер содержит 4 или 5 разных изображений.

Вот мой код.Я пытался придерживаться ES6.Я не хочу использовать jquery на этом.

fetch('./public/js/projects.json')
.then((Response) => {
return Response.json();
}).then((data) => {
const projects = data.projects;

projects.map((project, index) => {
    const container_projects = document.getElementById('projects');
    const project_img = project.img

    const markup_project = `
    <div class="project" aria-label="${index}">
        <div class="project_image">
            <div class="arrow_container">
                <button class="arrows left_arrow"><img src="assets/svg/left_arrow.svg" class="left"/></button>
                <div class="numbers">
                    <span class="current">1</span>
                    <span class="divider">/</span>
                    <span class="total">${project_img.length}</span>
                </div>
                <button class="arrows right_arrow"><img src="assets/svg/right_arrow.svg" class="right"/></button>
            </div>
            <div class="image_container">
                ${project_img.map(image => `<img src="${image}" class=""/>`).join('')}
            </div>
        </div>
        <small class="project_name">${project.title}</small>
    </div>
    `               
    container_projects.innerHTML += markup_project;         
})          

return projects
}).then((data) => {


data.map((project, index) => {
    const current_project = document.querySelectorAll(`.project`);
    const images = [].slice.call(current_project[index].querySelectorAll('.image_container img'));
    const arrows = current_project[index].querySelectorAll('.arrows');
    const current = current_project[index].querySelector('.current');

    images[0].classList.add('active');

    arrows.forEach((arrow) => {
        arrow.addEventListener('click', (e) => {


            let num;
            images.map((image, index)=> {

                if (image.classList.contains('active')){
                    image.classList.remove('active');   

                    if (e.target.className == 'right'){
                        num = index + 1
                    } else {
                        num = index - 1
                    }   

                    if (num >= images.length){
                        num = 0;                            
                    } 
                    else if (num <= -1 ){
                        num = images.length - 1
                    }


                    console.log(num)
                    return num;
                }
                return num;
            })

            images[num].classList.add('active');
            current.innerHTML = num + 1;



        });
    })
})
}).catch((error) => {
console.log(error);
})   

Спасибо за помощь.