Creo que cometí un error en el código js porque no funciona cuando hago clic en . No hay acciones. ¿Qué debo cambiar en el código js? Gracias. Mi código js:
const slides = document.querySelector(".slides"); const slidesCount = slides.childElementCount; console.log(slidesCount) const nextBtn=document.querySelector(".next-slide"); const prevBtn=document.querySelector(".prev-slide"); const container = document.querySelector('.slider-container') //Controls prevBtn.addEventListener('click', () => { changeSlide('prev') }) nextBtn.addEventListener('click', () => { changeSlide('next') }) let activeSlideIndex = 0 function changeSlide(direction) { if(direction === 'prev') { activeSlideIndex++ if(activeSlideIndex === slidesCount) { activeSlideIndex = 0 } } else if(direction === 'next') { activeSlideIndex-- if(activeSlideIndex < 0) { activeSlideIndex = slidesCount - 1 } } }Aquí mi código html.
<button class="prev-slide">◁</button> <button class="next-slide">▷</button> </div> <div class="slides"> <img class="slide" src="images/picture1.jpg" alt="slide image"> <img class="slide" src="images/picture2.jpg" alt="slide image"> <img class="slide" src="images/picture3.jpg" alt="slide image"> </div>Creo que lo único que faltaba era la representación real. Tienes que ocultar o mostrar de alguna manera la diapositiva activa. Lo hice agregando una clase active y solo mostrando eso (a través de CSS). Luego, su función changeSlide no solo calcula la diapositiva activa, sino que también establece la clase en el elemento apropiado.
const slides = document.querySelector(".slides"); const slidesCount = slides.childElementCount; console.log(`Showing ${slidesCount} slides.`) const nextBtn=document.querySelector(".next-slide"); const prevBtn=document.querySelector(".prev-slide"); const container = document.querySelector('.slider-container') //Controls prevBtn.addEventListener('click', () => { changeSlide('prev') }) nextBtn.addEventListener('click', () => { changeSlide('next') }) let activeSlideIndex = 0 function changeSlide(direction) { if(direction === 'prev') { activeSlideIndex++ if(activeSlideIndex === slidesCount) { activeSlideIndex = 0 } } else if(direction === 'next') { activeSlideIndex-- if(activeSlideIndex < 0) { activeSlideIndex = slidesCount - 1 } } Array.from(slides.children).forEach((slide, idx) => { if (idx === activeSlideIndex) { slide.classList.add('active'); } else { slide.classList.remove('active'); } }); } .controls { margin-bottom: 2em; } .slides .slide { display: none } .slides .slide.active { display: block; } <section class="controls"> <button class="prev-slide">◁</button> <button class="next-slide">▷</button> </section> <div class="slides"> <img class="slide active" src="https://via.placeholder.com/450x250" alt="slide image"> <img class="slide" src="https://loremflickr.com/640/250" alt="slide image"> <img class="slide" src="https://www.fillmurray.com/640/250" alt="slide image"> </div>