<div class="container">
  <div class="swiper-container-wrapper swiper-container-wrapper--timeline">
    <!-- Timeline -->
    <ul class="swiper-pagination-custom">
      <li class='swiper-pagination-switch first active'><span class='switch-title'>1911</span></li>
      <li class='swiper-pagination-switch'><span class='switch-title'>1970</span></li>
      <li class='swiper-pagination-switch'><span class='switch-title'>2023</span></li>
      <li class='swiper-pagination-switch last'><span class='switch-title'>3000</span></li>
    </ul>
    <!-- Progressbar -->
    <div class="swiper-pagination swiper-pagination-progressbar swiper-pagination-horizontal"></div>
    <!-- Swiper -->
    <div class="swiper swiper-container swiper-container--timeline">
      <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide"><span class="title">Swiper Timeline Progressbar</span></div>
        <div class="swiper-slide"><span class="title">Title 2</span></div>
        <div class="swiper-slide"><span class="title">Title 3</span></div>
        <div class="swiper-slide"><span class="title">Title 4</span></div>
      </div>
    </div>
  </div>
</div>

$primary-color: #000;
$secondary-color: #888;

html,
body {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: #eee;
}

body {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

.swiper-container-wrapper {
  &--timeline {
    .swiper-slide {
      display: flex;
      background: #fff;
      min-height: 300px;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      .container {
        padding: 0;
        width: 100%;
      }
      .title{
        font-size: 18px;
        opacity: 0;
        transition: 0.5s ease 0.5s;
      }
      &-active{
        .title{
          opacity: 1;
        }
      }
    }
    .swiper-pagination-progressbar {
      position: relative;
      margin-bottom: 70px;
      background-color: transparent;
      height: 4px;
      border-bottom: 1px solid $secondary-color;
      width: 75%;
      &-fill {
        background-color: $primary-color;
        height: 3px;
        top: 2px;
      }
      &:before {
        position: absolute;
        top: 2px;
        left: -100%;
        width: 100%;
        height: 3px;
        background-color: $primary-color;
        content: "";
      }
      &:after {
        position: absolute;
        top: 3px;
        right: -100%;
        width: 100%;
        height: 1px;
        background-color: $secondary-color;
        content: "";
      }
    }
    .swiper-pagination-custom {
      position: relative;
      list-style: none;
      margin: 1rem 0;
      padding: 0;
      display: flex;
      line-height: 1.66;
      bottom: 0;
      z-index: 11;
      width: 75%;
      display: flex;
      .swiper-pagination-switch {
        position: relative;
        width: 100%;
        height: 30px;
        line-height: 30px;
        display: block;
        .switch-title {
          position: absolute;
          font-weight: 400;
          right: 0;
          transform: translateX(50%);
          transition: 0.2s all ease-in-out;
          transition-delay: 0s;
          cursor: pointer;
          z-index: 1;
          &:after {
            position: absolute;
            top: calc(100% + 19px);
            right: 50%;
            transform: translateX(50%) translateY(-50%);
            width: 12px;
            height: 12px;
            background: $primary-color;
            border-radius: 2rem;
            content: "";
            transition: 0.2s all ease-in-out;
            transition-delay: 0s;
            z-index: 1;
          }
        }
        &.active {
          .switch-title {
            font-weight: 400;
            transition-delay: 0.4s;
            &:after {
              background: $primary-color;
              width: 25px;
              height: 25px;
              transition-delay: 0.4s;
            }
          }
          ~ .swiper-pagination-switch {
            .switch-title {
              color: $secondary-color;
              font-weight: 16px;
              &:after {
                background: $secondary-color;
              }
            }
          }
        }
      }
    }
  }
}

$(document).ready(function () {
  var mySwiper = new Swiper(".swiper", {
    autoHeight: true,
    autoplay: {
      delay: 5000,
      disableOnInteraction: false
    },
    speed: 500,
    direction: "horizontal",
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev"
    },
    pagination: {
      el: ".swiper-pagination",
      type: "progressbar"
    },
    loop: false,
    effect: "slide",
    spaceBetween: 30,
    on: {
      init: function () {
        $(".swiper-pagination-custom .swiper-pagination-switch").removeClass("active");
        $(".swiper-pagination-custom .swiper-pagination-switch").eq(0).addClass("active");
      },
      slideChangeTransitionStart: function () {
        $(".swiper-pagination-custom .swiper-pagination-switch").removeClass("active");
        $(".swiper-pagination-custom .swiper-pagination-switch").eq(mySwiper.realIndex).addClass("active");
      }
    }
  });
  $(".swiper-pagination-custom .swiper-pagination-switch").click(function () {
    mySwiper.slideTo($(this).index());
    $(".swiper-pagination-custom .swiper-pagination-switch").removeClass("active");
    $(this).addClass("active");
  });
});