Как да създадете слайдшоу с 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 след този урок