[miniProjects] 35_Image Carousel

35_Image Carousel

💻주제 : next, prev 버튼을 활용한 이미지 슬라이더

✨JS

let idx = 0 //현재 보여지는 이미지 인덱스 번호

let interval = setInterval(run , 2000)

function run() {
  idx++
  changeImage()
}

function changeImage() {
  //X축으로 500px만큼 이동하여 전환 효과를 줌
  if(idx > img.length - 1) {
    idx = 0
  } else if(idx < 0) {
    idx = img.length - 1
  }

  imgs.style.transform = `translateX(${-idx * 500}px)`
}

function resetInterval() {
  `clearInterval(interval)
  interval = setInterval(run, 2000)
}

leftBtn.addEventListener('click', () => {
  idx--
  changeImage()
})
rightBtn.addEventListener('click', () => {
  idx++
  changeImage()
  resetInterval()
})

❓reset을 하는 이유
이미지 슬라이더는 일정한 간격으로 이미지를 자동으로 전환해주는 기능이 있다. 이를 위해 setInterval() 함수를 사용하여 일정한 시간 간격으로 run() 함수를 호출하고 있다. 하지만 사용자가 수동으로 이미지를 전환할 경우, 자동 전환 간격을 다시 시작해야 한다. 이때 resetInterval() 함수를 사용하여 interval을 리셋하고 다시 시작하게 된다.