多个幻灯片 javascript 和 kirby-cms php

Question

我想在一页上使用多个幻灯片。我的 javascript 代码目前仅适用于一张幻灯片。我如何调整此代码以适用于所有具有相同 class 名称的多个幻灯片？

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

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 ?>

多个幻灯片 javascript 和 kirby-cms php

Multiple Slideshows javascript and kirby-cms php

javascript

php

ecmascript-6

kirby