<!-- Swiper -->
<div class="swiper">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="swiper-slide__time">1</div>
        <div class="swiper-slide__marker">A</div>
        <div class="swiper-slide__content">
          <div class="swiper-slide__top-side">
            1 Lorem ipsum dolor sit amet consectetur adipisicing elit.
          </div>
          <div class="swiper-slide__bottom-side">
            Natus, magnam iusto? Nemo maiores quibusdam sit placeat, earum deserunt voluptate.
          </div>
        </div>
      </div>

      <div class="swiper-slide">
        <div class="swiper-slide__time">2</div>
        <div class="swiper-slide__marker">B</div>
        <div class="swiper-slide__content">
          <div class="swiper-slide__top-side">
            2 Lorem ipsum dolor sit amet consectetur adipisicing elit.
          </div>
          <div class="swiper-slide__bottom-side">
            Natus, magnam iusto? Nemo maiores quibusdam sit placeat, earum deserunt voluptate.
          </div>
        </div>
      </div>

      <div class="swiper-slide">
        <div class="swiper-slide__time">3</div>
        <div class="swiper-slide__marker">C</div>
        <div class="swiper-slide__content">
          <div class="swiper-slide__top-side">
            3 Lorem ipsum dolor sit amet consectetur adipisicing elit.
          </div>
          <div class="swiper-slide__bottom-side">
            Natus, magnam iusto? Nemo maiores quibusdam sit placeat, earum deserunt voluptate.
          </div>
        </div>
      </div>

      <div class="swiper-slide">
        <div class="swiper-slide__time">4</div>
        <div class="swiper-slide__marker">D</div>
        <div class="swiper-slide__content">
          <div class="swiper-slide__top-side">
            4 Lorem ipsum dolor sit amet consectetur adipisicing elit.
          </div>
          <div class="swiper-slide__bottom-side">
            Natus, magnam iusto? Nemo maiores quibusdam sit placeat, earum deserunt voluptate.
          </div>
        </div>
      </div>

      <div class="swiper-slide">
        <div class="swiper-slide__time">5</div>
        <div class="swiper-slide__marker">E</div>
        <div class="swiper-slide__content">
          <div class="swiper-slide__top-side">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
          </div>
          <div class="swiper-slide__bottom-side">
            Natus, magnam iusto? Nemo maiores quibusdam sit placeat, earum deserunt voluptate.
          </div>
        </div>
      </div>

      <div class="swiper-slide">
        <div class="swiper-slide__time">6</div>
        <div class="swiper-slide__marker">F</div>
        <div class="swiper-slide__content">
          <div class="swiper-slide__top-side">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
          </div>
          <div class="swiper-slide__bottom-side">
            Natus, magnam iusto? Nemo maiores quibusdam sit placeat, earum deserunt voluptate.
          </div>
        </div>
      </div>

      <div class="swiper-slide">
        <div class="swiper-slide__time">7</div>
        <div class="swiper-slide__marker">N</div>
        <div class="swiper-slide__content">
          <div class="swiper-slide__top-side">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
          </div>
          <div class="swiper-slide__bottom-side">
            Natus, magnam iusto? Nemo maiores quibusdam sit placeat, earum deserunt voluptate.
          </div>
        </div>
      </div>

      <div class="swiper-slide">
        <div class="swiper-slide__time">8</div>
        <div class="swiper-slide__marker">N</div>
        <div class="swiper-slide__content">
          <div class="swiper-slide__top-side">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
          </div>
          <div class="swiper-slide__bottom-side">
            Natus, magnam iusto? Nemo maiores quibusdam sit placeat, earum deserunt voluptate.
          </div>
        </div>
      </div>

      <div class="swiper-slide">
        <div class="swiper-slide__time">9</div>
        <div class="swiper-slide__marker">N</div>
        <div class="swiper-slide__content">
          <div class="swiper-slide__top-side">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
          </div>
          <div class="swiper-slide__bottom-side">
            Natus, magnam iusto? Nemo maiores quibusdam sit placeat, earum deserunt voluptate.
          </div>
        </div>
      </div>

      <div class="swiper-slide">
        <div class="swiper-slide__time">10</div>
        <div class="swiper-slide__marker">N</div>
        <div class="swiper-slide__content">
          <div class="swiper-slide__top-side">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
          </div>
          <div class="swiper-slide__bottom-side">
            Natus, magnam iusto? Nemo maiores quibusdam sit placeat, earum deserunt voluptate.
          </div>
        </div>
      </div>

      <div class="swiper-slide">
        <div class="swiper-slide__time">11</div>
        <div class="swiper-slide__marker">N</div>
        <div class="swiper-slide__content">
          <div class="swiper-slide__top-side">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
          </div>
          <div class="swiper-slide__bottom-side">
            Natus, magnam iusto? Nemo maiores quibusdam sit placeat, earum deserunt voluptate.
          </div>
        </div>
      </div>

      <div class="swiper-slide">
        <div class="swiper-slide__time">12</div>
        <div class="swiper-slide__marker">N</div>
        <div class="swiper-slide__content">
          <div class="swiper-slide__top-side">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
          </div>
          <div class="swiper-slide__bottom-side">
            Natus, magnam iusto? Nemo maiores quibusdam sit placeat, earum deserunt voluptate.
          </div>
        </div>
      </div>

      <div class="swiper-slide">
        <div class="swiper-slide__time">13</div>
        <div class="swiper-slide__marker">N</div>
        <div class="swiper-slide__content">
          <div class="swiper-slide__top-side">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
          </div>
          <div class="swiper-slide__bottom-side">
            Natus, magnam iusto? Nemo maiores quibusdam sit placeat, earum deserunt voluptate.
          </div>
        </div>
      </div>

      <div class="swiper-slide">
        <div class="swiper-slide__time">14</div>
        <div class="swiper-slide__marker">N</div>
        <div class="swiper-slide__content">
          <div class="swiper-slide__top-side">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
          </div>
          <div class="swiper-slide__bottom-side">
            Natus, magnam iusto? Nemo maiores quibusdam sit placeat, earum deserunt voluptate.
          </div>
        </div>
      </div>

      <div class="swiper-slide">
        <div class="swiper-slide__time">15</div>
        <div class="swiper-slide__marker">N</div>
        <div class="swiper-slide__content">
          <div class="swiper-slide__top-side">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
          </div>
          <div class="swiper-slide__bottom-side">
            Natus, magnam iusto? Nemo maiores quibusdam sit placeat, earum deserunt voluptate.
          </div>
        </div>
      </div>

    </div>
  </div>

  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
</div>

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper {
  width: 70%;
  height: 200px;
  margin: 50px auto;
  position: relative;
}

.swiper-container {
  height: 100%;
}

.swiper-wrapper {
  align-items: center;
}

.swiper-pagination {
  bottom: -30px !important;
  text-align: center;
  width: 100%;
}

.swiper-pagination-bullet {
  margin: 0 6px;
}

.swiper-pagination-bullet-active {
  background-color: orangered;
}

.swiper-slide {
  position: relative;
  font-size: 18px;
  display: flex;
  align-items: center;
  transform: translateX(-200%);
  transition: transform 500ms;
  z-index: 0;
}

.swiper-slide::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -1px;
  right: -10px;
  height: 2px;
  background-color: orangered;
  transform: scaleX(1);
  transform-origin: 0 50%;
  transition: transform 500ms;
  z-index: -1;
}

.swiper-slide-active::before {
  transform: scaleX(4);
}

.swiper-slide-active ~ .swiper-slide {
  transform: translateX(100%);
}

.swiper-slide__time {
  position: absolute;
  top: calc(50% + 15px);
  left: -50%;
  width: 100%;
  text-align: center;
  user-select: none;
}

.swiper-slide__marker {
  position: absolute;
  width: 24px;
  height: 24px;
  left: -12px;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0);
  background-color: orangered;
  transform: scale(0.5);
  transition: transform 500ms, color 500ms;
  user-select: none;
}

.swiper-slide-active .swiper-slide__marker {
  color: rgba(255, 255, 255, 1);
  transform: scale(1);
}

.swiper-slide__content {
  font-size: 0.75em;
  width: 400%;
  height: 100%;
  position: absolute;
}

.swiper-slide__top-side {
  position: absolute;
  top: 0;
  left: 0;
  height: 50%;
  transform: translate(0, 0) scale(0);
  transform-origin: 0 100%;
  opacity: 0;
  transition: transform 500ms, opacity 500ms;
}

.swiper-slide-active .swiper-slide__top-side {
  opacity: 1;
  transform: translate(25%, 0%) scale(1);
}

.swiper-slide__top-side::before {
  content: '';
  position: absolute;
  top: 0;
  left: -10px;
  width: 2px;
  height: 100%;
  background-color: orangered;
}

.swiper-slide__bottom-side {
  display: flex;
  align-items: flex-end;
  position: absolute;
  height: 50%;
  left: 0;
  bottom: 0;
  transform: translate(0, 0) scale(0);
  transform-origin: 0 0;
  opacity: 0;
  transition: transform 500ms, opacity 500ms;
}

.swiper-slide-active .swiper-slide__bottom-side {
  opacity: 1;
  transform: translate(50%, 0%) scale(1);
}

.swiper-slide__bottom-side::before {
  content: '';
  position: absolute;
  top: 0;
  left: -10px;
  width: 2px;
  height: 100%;
  background-color: orangered;
}

new Swiper(".swiper-container", {
  slidesPerView: 6,
  speed: 500,
  centeredSlides: true,
  pagination: {
    el: ".swiper-pagination",
    clickable: true
  },
  breakpoints: {
    480: {
      slidesPerView: 8,
    },
    640: {
      slidesPerView: 12,
    }
  }
});