swiper progressbar

by Kim Ara

HTML

<!-- Slider main container -->
	<div class="swiper-container">
		<!-- Additional required wrapper -->
		<div class="swiper-wrapper">
			<!-- Slides -->
			<div class="swiper-slide">
				<div class="title">Slide 1</div>
				<div class="description">Lorem ipsum dolor sit amet</div>
			</div>
			<div class="swiper-slide">
				<div class="title">Slide 2</div>
				<div class="description">Lorem ipsum dolor sit amet</div>
			</div>
			<div class="swiper-slide">
				<div class="title">Slide 3</div>
				<div class="description">Lorem ipsum dolor sit amet</div>
			</div>
		</div>
		<!-- If we need pagination -->
		<div class="swiper-pagination"></div>

		<!-- If we need navigation buttons -->
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
		<!-- Progressbar -->
		<div class="swiper-progress-bar">
			<span class="slide_progress-bar"></span>
		</div>
	</div>

CSS

.swiper-slide-duplicate,
		.swiper-slide {
			background-position: center center;
			background-size: cover;
			text-align: center;
			font-size: 18px;
			background: #fff;
			/* Center slide text vertically */
			display: flex;
			flex-flow: column nowrap;
			justify-content: center;
			align-items: center;
			/* Slide content */
		}

		.swiper-slide-duplicate .description,
		.swiper-slide-duplicate .title,
		.swiper-slide .description,
		.swiper-slide .title {
			display: block;
			opacity: 0;
			transition: 0.5s ease 0.5s;
		}

		.swiper-slide-duplicate-active .description,
		.swiper-slide-duplicate-active .title,
		.swiper-slide-active .description,
		.swiper-slide-active .title {
			opacity: 1;
		}

		.swiper-slide-duplicate-active .title,
		.swiper-slide-active .title {
			margin-bottom: 0.5rem;
			font-size: 24px;
			color: #000;
			transition: opacity 0.5s ease 0.5s;
		}

		.swiper-slide-duplicate-active .description,
		.swiper-slide-active .description {
			font-size: 16px;
			color: #777;
			transition: opacity 0.5s ease 0.75s;
		}

		.swiper-progress-bar {
			position: relative;
			width: 100%;
			display: block;
			z-index: 1;
			height: 2px;
		}

		.swiper-progress-bar .slide_progress-bar {
			position: absolute;
			height: 2px;
			background: rgba(0, 0, 0, 0.3);
			width: auto;
			clear: both;
			opacity: 0;
			bottom: 45px;
			left: 0;
			right: 0;
		}

		.swiper-progress-bar .slide_progress-bar:after {
			position: absolute;
			top: 0;
			left: 0;
			background: #000;
			height: 100%;
			width: 0;
			content: "";
		}

		.swiper-progress-bar.active .slide_progress-bar {
			opacity: 1;
		}

		.swiper-progress-bar.animate .slide_progress-bar:after {
			transition: width linear;
			transition-delay: unset;
			width: 100%;
			transition-duration: 5s;
		}

JavaScript

var swiper = new Swiper(".swiper-container", {
			autoplay: {
				delay: 5000,
				disableOnInteraction: false
			},
			speed: 500,
			loop: true,
			pagination: {
				el: ".swiper-pagination",
				type: "fraction"
			},
			navigation: {
				nextEl: ".swiper-button-next",
				prevEl: ".swiper-button-prev"
			},
			on: {
				init: function () {
					$(".swiper-progress-bar").removeClass("animate");
					$(".swiper-progress-bar").removeClass("active");
					$(".swiper-progress-bar").eq(0).addClass("animate");
					$(".swiper-progress-bar").eq(0).addClass("active");
				},
				slideChangeTransitionStart: function () {
					$(".swiper-progress-bar").removeClass("animate");
					$(".swiper-progress-bar").removeClass("active");
					$(".swiper-progress-bar").eq(0).addClass("active");
				},
				slideChangeTransitionEnd: function () {
					$(".swiper-progress-bar").eq(0).addClass("animate");
				}
			}
		});