Building an image slideshow with navigation buttons in JavaScript

Other Questions JavaScript
1

Hey everyone! I’m working on my college project and need help with creating a slideshow component. I want to display content that includes both text and pictures, and when someone clicks a next button, it should switch to different content.

I tried making this work but I’m stuck. Here’s what I have so far:

let activeSlideIndex = 0;
const slides = document.querySelectorAll(".slideshow-wrapper .slide");

function showNextSlide() {
  slides[activeSlideIndex].style.display = "none";
  activeSlideIndex = (activeSlideIndex + 1) % slides.length;
  slides[activeSlideIndex].style.display = "block";
}

function initializeSlideshow() {
  slides.forEach((slide, index) => {
    slide.style.display = index === 0 ? "block" : "none";
  });
}

.slide {
  display: flex;
  align-items: center;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  margin: 10px 0;
}

.slide-content {
  flex: 1;
  padding-right: 20px;
}

.slide-image {
  flex: 1;
}

.slide-image img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.nav-button {
  background: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

<div class="slideshow-wrapper">
  <div class="slide">
    <div class="slide-content">
      <h3>Summer Beach Vacation</h3>
      <p>Discover amazing beaches and sunny weather perfect for relaxation.</p>
    </div>
    <div class="slide-image">
      <img src="beach.jpg" alt="Beach scene" />
    </div>
  </div>
  <div class="slide">
    <div class="slide-content">
      <h3>Mountain Adventure</h3>
      <p>Experience breathtaking views and exciting hiking trails.</p>
    </div>
    <div class="slide-image">
      <img src="mountain.jpg" alt="Mountain landscape" />
    </div>
  </div>
</div>
<button class="nav-button" onclick="showNextSlide()">Next →</button>

Can someone help me figure out what I’m doing wrong? I want it to cycle through the slides smoothly. Thanks!

2

Your code’s solid, but you’re missing the initialization call. Without initializeSlideshow() running, all slides stay visible instead of hiding everything except the first one. Just add initializeSlideshow(); at the end of your JS or wrap it in a DOMContentLoaded listener so it fires when the page loads. You might want a previous button too - create a showPreviousSlide() function that decrements instead of incrementing. I’ve built tons of these and honestly, this happens all the time. Easy fix though.

3

It seems like your code is on the right track, but you’re missing a crucial step. You need to call initializeSlideshow() to make the slides switch correctly. This function should run to set the initial state of the slideshow. Place the call at the end of your JavaScript or, to ensure it runs at the right time, wrap it in document.addEventListener('DOMContentLoaded', initializeSlideshow);. Additionally, consider using CSS transitions on the .slide class by adding transition: opacity 0.3s ease;. This will provide a smoother visual effect when transitioning between slides.

4

you’re missin the call to init function. make sure to add initializeSlideshow(); at the end of your JS or in window.onload. also consider using opacity instead of display none/block for smoother transitions.