개발일지 49 - 게시글 꾸미기 ..2

css코드까지 다 구현했으니 이제 자바스크립트 코드를 살펴보자

 

<script>
    let currentSlide = 0;
    const slides = document.querySelectorAll('.quote-slide');

    function showSlide(index) {
        slides.forEach((slide, i) => {
            slide.classList.remove('active');
            if (i === index) {
                slide.classList.add('active');
            }
        });
    }

    function nextSlide() {
        currentSlide = (currentSlide + 1) % slides.length; // 다음 슬라이드로 이동
        showSlide(currentSlide);
    }

    setInterval(nextSlide, 5000); // 5초마다 슬라이드 변경
    showSlide(currentSlide); // 초기 슬라이드 표시
</script>

 

 

let currentSlide = 0; 현재 보여지고 있는 슬라이드를 나타내는 변수다. 초기값으로 0을 설정하여 첫 번째 슬라이드를 표시하도록 했고

 

const slides = document.querySelectorAll('.quote-slide')는 HTML 문서에서 모든 슬라이드 요소를 선택하여 slides 변수에 저장한다.

---

showslide함수를 만들어주는데 특정 슬라이드를 보여주는 함수이다.

 

foreach는 slides 배열의 각 슬라이드에 대해 반복한다. (slide는 현재 슬라이드 요소, i는 인덱스)

 

마지막 조건문은 현재 인덱스(i)가 보여주려는 슬라이드의 인덱스(index)와 같다면, 해당 슬라이드에 .active 클래스를 추가하는 조건이다. 이 active클래스를 가진 슬라이드만 보이게 해준다.

---

nextslide는 다음 슬라이드를 보여주는 함수이다 

현재 슬라이드 인덱스를 1 증가시키고, 슬라이드의 총 개수로 나눈 나머지를 구한다. 이렇게 하면 마지막 슬라이드 이후에 다시 첫 슬라이드로 돌아가게 됩니다

예를 들어 총 슬라이드가 5개라면 인덱스는 0에서부터 4이다.  마지막 슬라이드 즉, 4에 1을 더하면 5라는 값이 나오고 그때 총 슬라이드의 개수로 나누면 나머지는 0이 된다.(5%5라는 것)

 

 

마무리로 setinterval함수를 사용해 nextslide를 호출하고 showslide로 페이지가 로드될때 첫번째 슬라이드를 보여준다.