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>

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>

• javascript
• html
• css

• 2 You aren't setting the width of the current slide. It's still stuck on 0% – Rory McCrossan Commented Feb 7 at 20:39
• Thx for your reply. I've tried to do this. But then I have to set the different width of the slides, correct? – user1735856 Commented Feb 7 at 21:02
• 1 Correct. You've built a rod for your own back with that design. I'd suggest trying to rebuild it using flex/grid so the widths are automatically calculated without you needing to explicitly calc() them – Rory McCrossan Commented Feb 7 at 21:21
• Maybe try making the width of the slide based on its index. eg: width = (index-1)*20 + 'px'. But rebuilding it would be best, try doing it using only a single active class that's applied to the currently visible slide. – admcfajn Commented Feb 7 at 21:23

2 Answers 2

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>

What said by @RoryMcCrossan was correct: You simply need to reset the width of your current slide. This could be done by reverting its value to the original one.

Here it is the snippet with the line slide.style.width = null; added to your js, it should revert that property to the original stylesheet

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) {
    // Here
      slide.style.width = null;
      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>