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
Swiper - Timeline Progressbar
Raw
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>
Raw
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");
});
});
Raw
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>
Raw
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;
}
}
}
}
}
}
}
}
Raw
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" />
Raw
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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment