Estoy tratando de hacer una presentación de diapositivas con html, css y js. Cuando agrego diapositivas adicionales a mi código actual, aparecen debajo de la primera diapositiva en lugar de en una presentación de diapositivas. ¿Alguien puede ver lo que está mal con mi código? Quiero que las imágenes estén una al lado de la otra como en una presentación de diapositivas.
function showSlides(n) { var i; var slides = document.getElementsByClassName("slideshow__slide"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) { slideIndex = 1; } if (n < 1) { slideIndex = slides.length; } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } } .slideshow { max-width: 1000px; position: relative; margin: auto; } .slideshow__slide { display: none; } <div class="slideshow"> <section class="slideshow__slide slide"> <figure class="slide__bg"> <img src="https://via.placeholder.com/150" /> <figcaption>caption</figcaption> </figure> <div class="slide__content"> <a href="#" class="cta"> <h2 class="cta__title">Sale</h2> <p class="cta__description"> Save up to 50% off </p> <span class="button button--primary">Shop</span> </a> </div> </section> <!-- second slide --> <section class="slideshow__slide slide"> <figure class="slide__bg"> <img src="https://via.placeholder.com/150" /> <figcaption>caption</figcaption> </figure> <div class="slide__content"> <a href="#" class="cta"> <h2 class="cta__title">Sale</h2> <p class="cta__description"> Save up to 50% off </p> <span class="button button--primary">Shop</span> </a> </div> </section> <!-- Next and previous buttons --> <a class="prev" onclick="plusSlides(-1)"><</a> <a class="next" onclick="plusSlides(1)">></a> </div>Bueno, en primer lugar, ni siquiera creó la función de JavaScript plusSlides(), pero para que se muestren una al lado de la otra, use el código CSS
display: inline-blockEsto hace que las imágenes se muestren una al lado de la otra.