javascript - 用于图像的 JS 滑块 - 有没有更简单的方法？

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);
})   

谢谢你的帮助。

标签： javascriptecmascript-6