JavaScript

const list = [
    "../images/img1.png",
    "../images/img2.png",
    "../images/img3.jpeg",
];

const img = document.getElementById('main');

const [leftArrow,rightArrow] = document.getElementsByTagName('span');

const div = document.getElementById('photo');

let imgN = 0;

document.addEventListener('DOMContentLoaded',function(){
    
    img.src = list[imgN];

    const p = document.createElement('p');
    p.classList.add('addClass');
    div.insertBefore(p,img.nextElementSibling);
    p.textContent = `${imgN + 1} / ${list.length}`;


    //ここから追加
    rightArrow.addEventListener('click',function(){
    
        imgN ++;
        
        img.src = list[imgN];
    
        p.textContent = `${imgN + 1} / ${list.length}`;
    });
    leftArrow.addEventListener('click',function(){
    
        imgN --;
        
        img.src = list[imgN];
    
        p.textContent = `${imgN + 1} / ${list.length}`;
    
    });
    //ここまで追加
     
     
});