Як створити слайд-шоу за допомогою 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 після цього підручника