Cannot move to previous slide in a JavaScript Slider

Question

I have a slider with different layers. Later, some text will be inserted in the layers. The layers should look like sheets lying on top of each other. With the buttons for previous and next I want to jump between the layers.

The Next-Button works fine. Previous-Button does not work. What is wrong?

let currentIndex = 0;
const slides = document.querySelectorAll('.slide');
const totalSlides = slides.length;

function updateSlides() {
  slides.forEach((slide, index) => {
    if (index < currentIndex) {
      slide.style.width = '0%';
      slide.style.left = '0%';
      slide.style.opacity = '0';
      slide.style.visibility = 'hidden';
      slide.style.transition = 'all 0.5s ease-out';
    } else if (index === currentIndex) {
      slide.style.right = '100%';
      slide.style.opacity = '1';
      slide.style.visibility = 'visible';
      slide.style.transition = 'all 1s ease-out';
    } else {
      slide.style.opacity = '1';
      slide.style.visibility = 'visible';
      slide.style.transition = 'all 1s ease-out';

    }
  });
}

// Function for next slide (move forward)
function nextSlide() {
  if (currentIndex < totalSlides - 1) {
    currentIndex++;
    updateSlides();
  }
}

// Function for previous slide (move backward)
function prevSlide() {
  if (currentIndex > 0) {
    currentIndex--;
    updateSlides();
  }
}

// Event listeners for the navigation buttons
document.querySelector('.next-button').addEventListener('click', nextSlide);
document.querySelector('.prev-button').addEventListener('click', prevSlide);

// Optionally, use the automatic slider function (if you want both auto and manual navigation)
//setInterval(() => {
//  nextSlide(); // This will trigger auto-sliding
//}, 3000);

.prev-button,
.next-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 1.5em;
  z-index: 10;
}

.prev-button {
  left: 10px;
}

.next-button {
  right: 10px;
}

.slider-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 280px;
}

.slider {
  position: relative;
  height: 100%;
  width: 100%;
  /* Enough space for all 4 slides */
  display: flex;
  transition: transform 3s ease-in-out;
}

.slide {
  position: absolute;
  height: 100%;
  transition: width 3s ease-in-out, left 3s ease-in-out;
}

.slide.yellow {
  z-index: 4;
  left: 0%;
  width: calc(100% - 60px);
}

.slide.pink {
  z-index: 3;
  left: 0%;
  width: calc(100% - 40px);
}

.slide.blue {
  z-index: 2;
  left: 0%;
  width: calc(100% - 20px);
}

/* The background slide */
.slide.green {
  z-index: 1;
  left: 0%;
  width: 100%;
}

<!-- Navigation buttons -->
<button class="prev-button">Previous</button>
<button class="next-button">Next</button>

<div class="slider-container">
  <div class="slider">
    <div class="slide yellow" style="background-color: #ffea92">
      <div class="content">yellow</div>
    </div> <!-- 1. Slide -->
    <div class="slide pink" style="background-color: #e2c6e0">
      <div class="content">pink</div>
    </div> <!-- 2. Slide -->
    <div class="slide blue" style="background-color: #b9d7f3">
      <div class="content">blau</div>
    </div> <!-- 3. Slide -->
    <div class="slide green" style="background-color: #8ebf1e">
      <div class="content">green</div>
    </div> <!-- 4. Slide -->

  </div>
</div>

Answer 1

Create a css class for the style changes that you currently have in your updateSlides(). Then in updateSlides() just add the class to the current slide and remove it from all others.

@admcfajn mentioned using a class. Likely he had something similar in mind.

let currentIndex = 0;
const slides = document.querySelectorAll('.slide');
const totalSlides = slides.length;

function updateSlides() {
  slides.forEach((slide, index) => {
    if (index < currentIndex) {
      // EDIT use a class
      slide.classList.add( "Hidden" );
    } else if (index === currentIndex) {
      // EDIT use a class
      slide.classList.remove( "Hidden" );
    } else {
      // EDIT use a class
      slide.classList.remove( "Hidden" );
    }
  });
}

// Function for next slide (move forward)
function nextSlide() {
  if (currentIndex < totalSlides - 1) {
    currentIndex++;
    updateSlides();
  }
}

// Function for previous slide (move backward)
function prevSlide() {
  if (currentIndex > 0) {
    currentIndex--;
    updateSlides();
  }
}

// Event listeners for the navigation buttons
document.querySelector('.next-button').addEventListener('click', nextSlide);
document.querySelector('.prev-button').addEventListener('click', prevSlide);

// Optionally, use the automatic slider function (if you want both auto and manual navigation)
//setInterval(() => {
//  nextSlide(); // This will trigger auto-sliding
//}, 3000);

/* EDIT Added class */
.Hidden {
  width: 0%;
  left: 0%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease-out;
}


.prev-button, .next-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 1.5em;
  z-index: 10;
}

.prev-button {
  left: 10px;
}

.next-button {
  right: 10px;
}

.slider-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 280px;
}

.slider {
  position: relative;
  height: 100%;
  width: 100%; /* Enough space for all 4 slides */
  display: flex;
  transition: transform 3s ease-in-out;
}

.slide {
  position: absolute;
  height: 100%;
  transition: width 3s ease-in-out, left 3s ease-in-out;
}

.slide.yellow {
  z-index: 4;
  left: 0%;
   width: calc(100% - 60px);
}

.slide.pink {
  z-index: 3;
  left: 0%; 
    width: calc(100% - 40px);
}

.slide.blue {
  z-index: 2;
  left: 0%; 
  width: calc(100% - 20px);
}

/* The background slide */
.slide.green {
  z-index: 1;
  left: 0%; 
  width: 100%;
}

<!-- Navigation buttons -->
  <button class="prev-button">Previous</button>
  <button class="next-button">Next</button>

<div class="slider-container">
    <div class="slider">
      <div class="slide yellow" style="background-color: #ffea92"><div class="content">yellow</div></div> <!-- 1. Slide -->
      <div class="slide pink" style="background-color: #e2c6e0"><div class="content">pink</div></div> <!-- 2. Slide -->
      <div class="slide blue" style="background-color: #b9d7f3"><div class="content">blau</div></div> <!-- 3. Slide -->
      <div class="slide green" style="background-color: #8ebf1e"><div class="content">green</div></div> <!-- 4. Slide -->
     
    </div>
  </div>