const gallery = document.querySelector('.gallery');
const prevBtn = document.querySelector('.prev_c');
const nextBtn = document.querySelector('.next_c');
const dotsContainer = document.createElement('ul');
dotsContainer.classList.add('slick-dots');
document.querySelector('.gallery-container').appendChild(dotsContainer);


const images = gallery.querySelectorAll('img');
let currentIndex = 0;


// dots ÀÚµ¿ »ý¼º
images.forEach((_, i) => {
  const dot = document.createElement('li');
  if (i === 0) dot.classList.add('active');
  dot.addEventListener('click', () => goToSlide(i));
  dotsContainer.appendChild(dot);
});


const dots = dotsContainer.querySelectorAll('li');


function updateDots() {
  dots.forEach(dot => dot.classList.remove('active'));
  dots[currentIndex].classList.add('active');
}


function goToSlide(index) {
  currentIndex = index;
  scrollPos = gallery.offsetWidth * index;
  gallery.scrollTo({
    left: scrollPos,
    behavior: 'smooth'
  });
  updateDots();
}


function prevSlide() {
  if (currentIndex > 0) {
    currentIndex--;
  } else {
    currentIndex = images.length - 1;
  }
  goToSlide(currentIndex);
}


function nextSlide() {
  if (currentIndex < images.length - 1) {
    currentIndex++;
  } else {
    currentIndex = 0;
  }
  goToSlide(currentIndex);
}


prevBtn.addEventListener('click', prevSlide);
nextBtn.addEventListener('click', nextSlide);


// ÀÚµ¿ Àç»ý
setInterval(() => {
  nextSlide();
}, 3000);