// 선택자
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img");
const slider = sliderWrap.querySelectorAll(".slider");


let currentIndex = 0;               // 현재 보이는 이미지 (0으로 변경)
let sliderCount = slider.length;    // 이미지 갯수
let sliderInterval = 6000;          // 이미지 변경 간격 시간


function imgSlide() {
    setInterval(() => {
        let nextIndex = (currentIndex + 1) % sliderCount;


        gsap.to(slider[currentIndex], { opacity: 0, duration: 2 }); // 현재 슬라이더 숨기기
        gsap.to(slider[nextIndex], { opacity: 1, duration: 2 }); // 다음 슬라이더 보여주기


        currentIndex = nextIndex;
    }, sliderInterval);
}


window.onload = function() {
    // 첫 번째 이미지를 보이도록 설정
    gsap.set(slider[0], { opacity: 1 });
    imgSlide();
}