Swiper - Timeline Progressbar

index.html

<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'>2021</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>

script.js

$(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");
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.8.4/swiper-bundle.min.js"></script>

style.scss

$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;
              }
            }
          }
        }
      }
    }
  }
}

styles

<link href="https://unpkg.com/swiper/swiper-bundle.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />

swiper-timeline-progressbar.markdown

Swiper - Timeline Progressbar

Swiper Timeline Progressbar, Responsive slider timeline, slider timeline, timeline progress, Slider Timeline Progressbar, swiper slider timeline, slider timeline with progressbar, swiper timeline with progressbar, animated timeline progressbar, animated progressbar, swiper progressbar

A Pen by Álvaro on CodePen.

License.