Как создать слайд-шоу с HTML, CSS и JavaScript

Автор оригинала: FreeCodeCamp Community Member.

Веб-слайд-шоу – это последовательность изображений или текста, которая состоит из определения одного элемента последовательности в определенном интервале времени.

Для этого учебника вы можете создать слайд-шоу, следуя этим простым шагам:

Написать некоторую разметку

Пишите стили, чтобы скрыть слайды и показать только один слайд.

Чтобы скрыть слайды, вы должны дать им стиль по умолчанию. Это диктомет, что вы показываете только один слайд, если он активен или если вы хотите показать это.

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

  [data-component="slideshow"] .slide.active {
    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);
  }

Пример кодепена после этого руководства

Оригинал: “https://www.freecodecamp.org/news/how-to-create-a-slideshow/”