I am trying to make a slideshow with html, css and js. When I add additional slides to my current code they appear under the first slide instead of in a slide show. Can anyone see what is wrong with my code? I want the images to be next to each other like in a slideshow.
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>Well first of all you did not even create the JavaScript function plusSlides(), but to make them display next to each other, use the CSS code
display: inline-block
This makes images display next to each other.