Skip to content

Instantly share code, notes, and snippets.

@ziabs

ziabs/index.html

Created June 12, 2023 16:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ziabs/b46c3405b68f0997fd5e28f4fd998038 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ziabs/b46c3405b68f0997fd5e28f4fd998038 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ziabs created this gist Jun 12, 2023.
    23 changes: 23 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    <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>
    37 changes: 37 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,37 @@
    $(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");
    });
    });
    2 changes: 2 additions & 0 deletions scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,2 @@
    <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>
    139 changes: 139 additions & 0 deletions style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,139 @@
    $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;
    }
    }
    }
    }
    }
    }
    }
    }
    2 changes: 2 additions & 0 deletions styles
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,2 @@
    <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" />
    7 changes: 7 additions & 0 deletions swiper-timeline-progressbar.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    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](https://codepen.io/alvarotrigo/pen/ExwYyKZ) by [Álvaro](https://codepen.io/alvarotrigo) on [CodePen](https://codepen.io).

    [License](https://codepen.io/license/pen/ExwYyKZ).