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 = '100%';
      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>