Next page slide animation in CSS and JavaScript

Question

I am trying to achieve a "next page" slide animation in CSS and Javascript. If user clicks a div page, the current page move left and fade out and next page will replace the current container.

This is what I tried, but I don't know how to change container to have dimensions based on current page.

(function () {
  document.querySelectorAll(".page").forEach((item, idx) => {
    if (idx !== 0) {
      item.classList.add("hidden");
      item.style.maxHeight = 0;
    } else {
    }
  });

  document.querySelectorAll(".page").forEach((item) => {
    item.addEventListener("click", (event) => {
      const currentPage = event.target.closest(".page");
      const nextPage = currentPage.nextElementSibling;
      nextPage.style.maxHeight = "1000px";
      nextPage.classList.add("show-page");
      currentPage.classList.add("hide-page");
    });
  });
})();

.container {
  font-family: inherit;
  position: fixed;
  bottom: 40px;
  right: 40px;
  background-color: #eb6383;
  width: 300px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.page {
  display: flex;
  flex-direction: column;
  transition: 1s;
  left: 0%;
  opacity: 1;
  position: relative;
  background-color: yellow;
}

.hidden {
  position: relative;
  overflow: hidden;
  left: 100%;
  transition: 1s;
}

.show-page {
  position: relative;
  left: 0%;
  transition: 1s;
}

.hide-page {
  opacity: 0;
  left: -100%;
  transition: 1s;
}

<div class="container">
        <div class="page">
            <div class="Header">page 1</div>
            <div class="Content">
                content page 1
            </div>
        </div>
        <div class="page">
            <div class="Header">page 2</div>
            <div class="Content">
                content page 2
            </div>
        </div>
        <div class="page">
            <div class="Header">page 3</div>
            <div class="Content">
                content page 3
            </div>
        </div>
    </div>

Answer 1

Instead of moving each slide on it's own, we can animate a parent element holding all the slides

Here's a simplified version.

(function() {

  let slides = document.querySelectorAll('.page');
  let slidesCount = slides.length
  let index = 0; // index
  slides.forEach(slide => {
    slide.onclick = (e) => {

      /* Logic */
      let nextIndex = (++index % slidesCount);
      /* End Logic */


      /* Management for the CSS */
      // By how much we want to move, In Percents.
      // A negative value because we're moving left
      let ditance = -100;
      // If nextIndex = 2, Then rawCssValue = -200
      let styleValue = nextIndex * ditance; 


      /* Applying the CSS */
      let style = `translateX(${styleValue}%)`;
      e.target.parentElement.style.transform = style;
    }
  });
})()

.container {
    font-family: inherit;
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 300px;
    background: #eb6383;
    overflow: hidden;
}

.page {
    display: flex;
    transition: 1s;
    left: 0%;
    opacity: 1;
    position: relative;
    background-color: yellow;
}

/* New */
.page {
    flex: 0 0 auto;
    height: 100%;
    width: 100%;
}

.page + .page {
    margin-left: 20px;
}

.slide {
    padding: 10px;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    background: #eb6383;
    transition: all .5s linear;
    transform: translateX(0);
}

<div class="container">
  <div class="slide">
    <div class="page">
      <div class="Header">page 1</div>
      <div class="Content">
        content page 1
      </div>
    </div>
    <div class="page">
      <div class="Header">page 2</div>
      <div class="Content">
        content page 2
      </div>
    </div>
    <div class="page">
      <div class="Header">page 3</div>
      <div class="Content">
        content page 3
      </div>
    </div>
    <div class="page">
      <div class="Header">page 4</div>
      <div class="Content">
        content page 4
      </div>
    </div>
  </div>
</div>

---

I recommend using buttons for navigating through the slider, clicking the page to the move will become problematic very quick Because the children consume the event.