<div class="box">

    <img id="img" src="img/img-0.jpg" width="350" height="350">
    <h4 id="name">사과 이름 0</h4>
    <p id="txt">사과 설명 0</p>

    <a href="#" class="btn prevBtn">Prev</a>
    <a href="#" class="btn nextBtn">Next</a>

  </div>





  <script src="js/main.js"></script>





</body>
</html>

.box {
  position: relative;

  width: 500px;
  padding: 50px;
  background: #fff;
  border-radius: 5px;
  border: solid 1px black;

  margin: 100px auto;
}

.btn {
  position: absolute;
  display: inline-block;
  background: #cccccc;

  padding: 10px;
  color: #fff;
}

.prevBtn {
  top: 50%;
  left: 0;
  transform: translate(-120%, -50%);
}

.nextBtn {
  top: 50%;
  right: 0;
  transform: translate(120%, -50%);
}


var arr = [];
var i = 0;

function Customer(name, img, txt) {
  this.name = name;
  this.img = img;
  this.txt = txt;
}

function createCustomer(name, img, txt) {

  var fullImg = `img/img-${img}.jpg`;
  
  var customer = new Customer(name, fullImg, txt);
  arr.push(customer);

}


createCustomer('사과 1 이름', 0, "사과 1 설명");
createCustomer('사과 2 이름', 1, "사과 2 설명");
createCustomer('사과 3 이름', 2, "사과 3 설명");
createCustomer('사과 4 이름', 3, "사과 4 설명");



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

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

    e.preventDefault(); 

    if(e.target.classList.contains('prevBtn')) {
      
      if(i === 0) {
        i = arr.length;
      }
      
      i--;

      document.getElementById('img').src = arr[i].img;
      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;
      }
      
      i++;

      document.getElementById('img').src = arr[i].img; 
      document.getElementById('name').textContent = arr[i].name;
      document.getElementById('txt').textContent = arr[i].txt;

    }

  });

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.