var arr = [

  {
    img: "img/img-0.jpg",
    name: "사과 이름 0",
    txt: "사과 설명 0"
  },

  {
    img: "img/img-1.jpg",
    name: "사과 이름 1",
    txt: "사과 설명 1"
  },

  {
    img: "img/img-2.jpg",
    name: "사과 이름 2",
    txt: "사과 설명 2"
  },

  {
    img: "img/img-3.jpg",
    name: "사과 이름 3",
    txt: "사과 설명 3"
  },

];


var i = 0; // 기준점


document.querySelectorAll('.btn').forEach(function (element, index) {

  element.addEventListener('click', function(e) {

    e.preventDefault(); 
    // a태그의 '#' 이동 기능 비활성화
    if(e.target.classList.contains('prevBtn')) {
      
      if(i === 0) {
        i = arr.length; // i = 4
      }
      
      i--; // i = 3

      document.getElementById('img').src = arr[i].img; // .src 경로 설정
      document.getElementById('name').textContent = arr[i].name;
      document.getElementById('txt').textContent = arr[i].txt;

    }

    if(e.target.classList.contains('nextBtn')) {

      if(i === arr.length -1) {
        i = -1; // -1이 아래의 i++와 만나 0이 됨
      }
      
      i++;

      document.getElementById('img').src = arr[i].img; // .src 경로 설정
      document.getElementById('name').textContent = arr[i].name;
      document.getElementById('txt').textContent = arr[i].txt;

    }

  });

});