▷ Cum Să Creați Un Slideshow Cu HTML, CSS și JavaScript

Un slideshow 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

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Slideshow</title>
      <link rel="stylesheet" href="https://www.freecodecamp.org/news/how-to-create-a-slideshow/style.css">
    </head>
    <body>
      <div id="slideshow-example" data-component="slideshow">
        <div role="list">
          <div class="slide">
            <img src="" alt="">
          </div>
          <div class="slide">
            <img src="" alt="">
          </div>
          <div class="slide">
            <img src="" alt="">
          </div>
        </div>
      </div>
    <script src="slideshow.js"></script>
    </body>
  </html>

Scrieți stiluri pentru a ascunde diapozitivele și afișați doar un singur 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 a schimba ce 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 va fi 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);
  }