Quiero usar varias presentaciones de diapositivas en una página. Mi código javascript está actualmente diseñado solo para una presentación de diapositivas. ¿Cómo puedo adaptar este código para que funcione en varias presentaciones de diapositivas que tienen todos los mismos nombres de clase?
Ya me habían dicho que debía probar clases y constructor de javascript, pero aún no me había atrevido a hacerlo. Me gustaría entender cómo hacer que el código reaccione a la presentación de diapositivas de manera específica en lugar de global.
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 ?>Para alguien interesado en la solución.
'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 ?>