多Slideshows javascript和kirby-cms php

Question

我想在一页上使用多个幻灯片。我的javascript代码目前只为一个幻灯片设计。如何使这段代码适用于所有类名相同的多个幻灯片？

我已经被告知我应该尝试javascript类和构造函数，但我还不敢这样做。我想了解如何使代码反应幻灯片--具体的而不是全局的。

​

document.addEventListener('DOMContentLoaded', () => {
  const slideshows = document.getElementsByClassName('slideshow');

  for (const slideshow of slideshows) {
    slideshow.firstElementChild.className = 'slides showing ';
  }
  let currentSlide = 0;
  const slides = document.getElementsByClassName('slides');

  for (const slide of slides) {
    slide.addEventListener('click', (event) => {
      event.preventDefault();

      slides[currentSlide].className = 'slides ';
      currentSlide = (currentSlide + 1) % slides.length;
      slides[currentSlide].className = 'slides showing';
    });
  }
});

<!-- kirby cms snippet -->

<?php foreach($data->children()->listed() as $slideshow): ?>
<section id="<?= $slideshow->id() ?>" class="slideshow">
  <?php foreach($slideshow->images() as $image): ?>
  <div class="slides">
    <img src=" <?= $image->resize(null, 500)->url(); ?>" alt="<?=$image->name()?>"
      data-slide="{<?= $image->resize(null, 180)->url(); ?>}" />
  </div>
  <?php endforeach ?>
</section>
<?php endforeach ?>

​

Answer 1

对解决方案感兴趣的人。

​

'use strict';

document.addEventListener('DOMContentLoaded', () => {
  const slideshows = document.getElementsByClassName('slideshow');

  for (const slideshow of slideshows) {
    const slides = slideshow.getElementsByClassName('slides');
    slideshow.firstElementChild.className = 'slides showing ';
    let currentSlide = 0;
    for (const slide of slides) {
      slide.addEventListener('click', (event) => {
        event.preventDefault();
        slides[currentSlide].className = 'slides';
        currentSlide = (currentSlide + 1) % slides.length;
        slides[currentSlide].className = 'slides showing';
      });
    }
  }
});

<!-- kirby cms snippet -->
<?php foreach($data->children()->listed() as $slideshow): ?>
<section id="<?= $slideshow->id() ?>" class="slideshow">
  <?php foreach($slideshow->images() as $image): ?>
  <div class="slides">
    <img src=" <?= $image->resize(null, 500)->url(); ?>" alt="<?=$image->name()?>"
      data-slide="{<?= $image->resize(null, 180)->url(); ?>}" />
  </div>
  <?php endforeach ?>
</section>
<?php endforeach ?>

​