Cum să creați un slideshow cu HTML, CSS și JavaScript

O prezentare de diapozitive web este o secvență de imagini sau text care constă în afișarea unui element al secvenței într-un anumit interval de timp.

Pentru acest tutorial puteți crea un slideshow urmând acești pași simpli:

Scrieți ceva marcaj

     Slideshow 

Scrieți stiluri pentru a ascunde diapozitivele și afișați doar un diapozitiv.

Pentru a ascunde diapozitivele trebuie să le dați un stil implicit. Va dicta să afișați un singur diapozitiv dacă este activ sau dacă doriți să-l afișați.

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

Schimbați diapozitivele într-un interval de timp.

Primul pas pentru schimbarea prezentărilor de diapozitive este să selectați învelișul (diapozitivele) și apoi diapozitivele acestuia.

Când selectați diapozitivele, trebuie să treceți peste fiecare diapozitiv și să adăugați sau să eliminați o clasă activă în funcție de diapozitivul pe care doriți să îl afișați. Apoi repetați procesul pentru un anumit interval de timp.

Rețineți că atunci când eliminați o clasă activă dintr-un diapozitiv, o ascundeți din cauza stilurilor definite în pasul anterior. Dar când adăugați o clasă activă la diapozitiv, suprascrieți stilul display:none to display:block, astfel încât diapozitivul să fie afișat utilizatorilor.

 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 exemplu urmând acest tutorial