해당 기능이 있는 페이지 : 메인 페이지

1. 변수 선언

// 현재 나타나고 있는 슬라이드 인덱스
let currentSlide=1;
// 슬라이더 아이템
const sliderItems = document.querySelectorAll('.index_sliderListItem');
// 진행바 아이템
const progressbars = document.querySelectorAll('.index_sliderProgressbar');
// 자동 실행이 되고 있는지 확인
let isInterval;

// 현재 슬라이더 인덱스
const currentSlideIndex = document.querySelector('.index_currentPageText');
// 이전 버튼
const sliderPrevBtn = document.querySelector('.index_sliderPrevBtn');
// 다음 버튼
const sliderNextBtn = document.querySelector('.index_sliderNextBtn');
// 재생 버튼
const sliderPlayBtn = document.querySelector('.index_sliderPlayBtn');
// 정지 버튼
const sliderStopBtn = document.querySelector('.index_sliderStopBtn');

모든 슬라이더 아이템에 visibility: hidden 속성을 주고 currentSlide 번째에 해당하는 아이템만 visibility: hidden을 해제하기 위해 위와 같이 변수 선언을 한다.

2. 함수 선언

function renderCurrentSlideIndex(){
    currentSlideIndex.textContent=currentSlide;
    showCurrentSlider();
    showCurrentProgressbar();
}

function showCurrentSlider(){
    sliderItems.forEach((sliderItem, sliderIndex)=>{
        sliderItem.classList.add('invisible');
    })
    sliderItems[currentSlide-1].classList.remove('invisible');
}

function showCurrentProgressbar(){
    progressbars.forEach((progressbar, barIndex)=>{
        progressbar.classList.remove('index_sliderProgressbar--on')
    })
    progressbars[currentSlide-1].classList.add('index_sliderProgressbar--on')
}

function runCurrentSlideInterval(){
    isInterval = setInterval(addCurrentSlide, 4000);
}

function addCurrentSlide(){
    currentSlide = currentSlide < 4 ? currentSlide + 1 : 1;
    renderCurrentSlideIndex();
}

• renderCurrentSlideIndex

현재 몇 번째 인지 표시해주는 요소인 currentSlideIndex의 텍스트 노드를 currentSlide(숫자) 변수로 설정한다.

• showCurrentSlider

실행될 때 마다 일단 forEach 문을 통해 모든 요소를 visibility: hidden 적용시키고 현재 보여지는 슬라이드에는 visibility:hidden을 해제시킨다.

• showCurrentProgressbar

마찬가지로 currentSlide-1 번째 진행바가 해당 요소에 맞게 같이 출력되도록 설정한다.

• runCurrentSliderInterval

슬라이더를 4초 간격으로 전환시키기 위한 함수이다.

• addCurrentSlide

currentSlide의 값을 1 추가시키기 위한 함수이다. 지금은 진행바 구조 상 4개로 적용시키는 게 맞아서 현재 슬라이드가 3일 경우 (4보다 작을 경우) 처음 슬라이드로 넘어가게 설정했지만 추후 진행 바의 개수가 변동될 경우를 대비해서 매개변수로 최대 슬라이더 수를 놓으면 좋겠다.

3. 요소에 이벤트 부여하기

sliderPrevBtn.addEventListener('click', function(){
    clearInterval(isInterval);
    runCurrentSlideInterval();
    currentSlide = currentSlide > 1 ? currentSlide - 1 : 4;
    renderCurrentSlideIndex();
})

sliderNextBtn.addEventListener('click', function(){
    clearInterval(isInterval);
    runCurrentSlideInterval();
    addCurrentSlide();
    renderCurrentSlideIndex();
})

sliderPlayBtn.addEventListener('click', function(){
    runCurrentSlideInterval();
    sliderPlayBtn.classList.add('hidden');
    sliderStopBtn.classList.remove('hidden');
})

sliderStopBtn.addEventListener('click', function(){
    clearInterval(isInterval);
    sliderStopBtn.classList.add('hidden');
    sliderPlayBtn.classList.remove('hidden');
})

• 이전 버튼 (sliderPrevBtn)

클릭이 발생 시, 4초 간 currentSlide 값이 변화되는 행위를 중단시키고, 다시 4초 간 값이 변화되도록 새로 시작한다. 이렇게 해야 이전 버튼을 눌렀을 때 훅 넘어가는 게 아니라 간격을 두고 다시 넘어갈 수 있게 된다.

만약 currentSlide 값이 1보다 작아질 경우 가장 끝 슬라이드로 넘어간다.

• 재생 버튼 (sliderPlayBtn)

클릭 이벤트가 발생할 시, 다시 4초 간 슬라이드가 넘어가게 설정한다.

• 중지 버턴 (sliderStopBtn)

클릭 이벤트가 발생할 시, 4초 간 슬라이드가 넘어가는 행위를 중단한다.

4. 함수 실행

runCurrentSlideInterval();
showCurrentSlider();
showCurrentProgressbar();

페이지가 로드될 때 슬라이드가 자동으로 넘어갈 수 있게 runCurrentSlideInterval 함수를 실행하고, 현재 슬라이드, 현재 진행바를 재생한다.

5. 배운 내용

5.1 display:none vs visibility:hidden

display: none을 할 경우 DOM 요소에 해당 요소는 반영이 안 된다. 반면 visibility: hidden의 경우 DOM에는 반영이 되지만 마치 100% 투명인 것처럼 보이지만 않게 된다.

이미지를 불러올 경우 display: block으로 변경됐을 때 이미지를 로드하느라 버벅일 수 있기 때문에 DOM 요소에 반영되는 visibility: hidden으로 적용했다.

5.2 Node.prototype.textContent

출처 : 자바스크립트 딥 다이브

요소 노드의 텍스트와 모든 자손 노드의 텍스트를 모두 취득하거나 변경할 수 있다.

5.3 Element.prototype.classList

클래스 어트리뷰트의 정보를 담은 DOMTokenList 객체를 반환하며 이 객체는 클래스를 제어하기 위한 메서드를 제공한다.

• add

인수로 전달한 1개 이상의 문자열을 class 어트리뷰트 값으로 추가한다.

• remove

인수로 전달한 1개 이상의 문자열과 일치하는 클래스를 삭제한다.

반면에 className으로 제어할 때는 공백으로 구분된 여러 개의 클래스를 반환하는 경우 다루기가 불편하다.

5.4 EventTarget.prototype.addEventListener

addEvnetListener('eventType', 'eventHandler', [, useCapture])

• eventType

이벤트의 종류를 나타내는 문자열인 이벤트 타입을 전달한다. 이 때 이벤트 핸들러 프로퍼티 방식과는 달리 on 접두사를 붙이지 않는다.

• eventHandler

이벤트가 발생했을 때 실행할 함수를 전달한다.

• [, useCapture]

이벤트를 캐치할 이벤트 전파 단계 (캡처링 또는 버블링)를 지정한다. false를 입력하면 버블링 단계에서 이벤트를 캐치하고, true를 지정하면 캡처링 단계에서 이벤트를 캐치한다.

기존 on- 접두사로 선언하는 이벤트 핸들러 프로퍼티 방식은 하나 이상의 이벤트를 등록할 수 없지만 addEventListener 메서드는 하나 이상의 이벤트 핸들러를 등록할 수 있다.