Создать несколько слайд-шоу с помощью JavaScript - PullRequest
Новая
       15

Создать несколько слайд-шоу с помощью JavaScript

0 голосов
/ 27 сентября 2019

Я работаю над сайтом портфолио, где я показываю изображения в виде слайд-шоу внутри лайтбокса.Когда я нажимаю на изображение, открывается лайтбокс и показывается слайд-шоу с другими изображениями этого проекта.Я хочу создать несколько слайд-шоу на одной странице, без переписывания javascript для каждого слайда, это возможно?Я заставил это работать один, но я понятия не имею, как повторить это в остальных слайдах, не копируя весь код снова.Кто-нибудь может мне помочь?Спасибо

HTML-код ссылки на одно изображение и лайтбокс: 

 <!-- Portfolio item 01-->

 <div class="projects" id="portfolio-01">
   <a href="#" id="btnOpen"><img id="img-project" src="img/Arba_img_02.jpg"></a>
  </div>


<!-- Portfolio Lightboxes-->

 <!-- Lightbox 01-->
    <div class="container" id="portfolio-item-01">
     <div class="slide">
         <img class="portfolio-img" src="img/Arba_img_01.jpg">
     </div>
     <div class="slide">
         <img class="portfolio-img" src="img/Arba_img_02.jpg">
     </div>
     <div class="slide">
         <img class="portfolio-img" src="img/Arba_img_03.jpg">
     </div>

   <!-- Next and previous buttons -->
     <a class="prev" id="">Prev</a>
     <a class="next" id="">Next</a>

   <!-- Close -->
    <a href="#portfolio" class="close">Back ↗</a>

   </div>

JavaScript: 

<script>

    let sliderImages = document.querySelectorAll('.slide'),
    arrowLeft = document.querySelector('.prev'),
    arrowRight = document.querySelector('.next'),
    current = 0,
    openSlide = document.getElementById('btnOpen'),
    container = document.querySelector('.container');


openSlide.addEventListener("click", function(){


  container.style.display = 'flex';

  // Clear all images
  function reset() {
    for (let i = 0; i < sliderImages.length; i++) {
      sliderImages[i].style.display = "none";
    }
  }

  // Init slider
  function startSlide() {
    reset();
    sliderImages[0].style.display = "flex";
  }

  // Show prev
  function slideLeft() {
    reset();
    sliderImages[current - 1].style.display = "flex";
    current--;
  }

  // Show next
  function slideRight() {
    reset();
    sliderImages[current + 1].style.display = "flex";
    current++;
  }

  // Left arrow click
  arrowLeft.addEventListener("click", function(){
    if (current === 0) {
      current = sliderImages.length;
    }
    slideLeft();
  });

  // Right arrow click
  arrowRight.addEventListener("click", function() {
    if (current === sliderImages.length - 1) {
      current = -1;
    }
    slideRight();
  });

  startSlide();

})

</script>
...