HTML, CSS 및 JavaScript를 사용하여 슬라이드 쇼를 만드는 방법

웹 슬라이드 쇼는 특정 시간 간격으로 시퀀스의 한 요소를 표시하는 일련의 이미지 또는 텍스트입니다.

이 자습서에서는 다음과 같은 간단한 단계에 따라 슬라이드 쇼를 만들 수 있습니다.

마크 업 작성

     Slideshow 

스타일을 작성하여 슬라이드를 숨기고 하나의 슬라이드 만 표시합니다.

슬라이드를 숨기려면 기본 스타일을 지정해야합니다. 활성 상태이거나 표시하려는 경우 하나의 슬라이드 만 표시하도록 지시합니다.

 [data-component="slideshow"] .slide { display: none; } [data-component="slideshow"] .slide.active { display: block; }

시간 간격으로 슬라이드를 변경합니다.

표시 할 슬라이드를 변경하는 첫 번째 단계는 슬라이드 래퍼를 선택한 다음 해당 슬라이드를 선택하는 것입니다.

슬라이드를 선택하면 각 슬라이드로 이동하여 표시 할 슬라이드에 따라 활성 클래스를 추가하거나 제거해야합니다. 그런 다음 특정 시간 간격 동안 프로세스를 반복하십시오.

슬라이드에서 활성 클래스를 제거하면 이전 단계에서 정의 된 스타일로 인해 숨겨집니다. 그러나 슬라이드에 활성 클래스를 추가하면 스타일을 덮어 쓰게 display:none to display:block되므로 슬라이드가 사용자에게 표시됩니다.

 var slideshows = document.querySelectorAll('[data-component="slideshow"]'); // Apply to all slideshows that you define with the markup wrote slideshows.forEach(initSlideShow); function initSlideShow(slideshow) { var slides = document.querySelectorAll(`#${slideshow.id} [role="list"] .slide`); // Get an array of slides var index = 0, time = 5000; slides[index].classList.add('active'); setInterval( () => { slides[index].classList.remove('active'); //Go over each slide incrementing the index index++; // If you go over all slides, restart the index to show the first slide and start again if (index === slides.length) index = 0; slides[index].classList.add('active'); }, time); }

이 자습서를 따르는 Codepen 예제