Stories Slider In HTML CSS JS

This code implements a Stories Slider in HTML, CSS, and JS. The main functionality is to create a slider that displays images and videos in a loop, resembling a stories feature commonly seen on social media platforms. The code utilizes the Swiper library to achieve this interactive slider, making it helpful for creating engaging and dynamic content presentations on a webpage.

It’s useful for showcasing visual content like images and videos in an interactive and eye-catching manner. You can use this code on your website to create an engaging Stories Slider. This feature can enhance user engagement, making your website more appealing and modern.

How to Create Stories Slider In HTML CSS JS

1. First of all, load the Swiper CSS by adding the following CDN link into the head tag of your HTML document.

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css'>

2. Create the HTML structure for the story slider as follows:

<div class="story">
	 
	 <div class="story__slider swiper">
		 <div class="story__wrapper swiper-wrapper">
			 <div class="story__slide swiper-slide">
			 	<img src="https://picsum.photos/450/800" />
			 </div>
			 <div class="story__slide swiper-slide">
				 <video autoplay muted>
					 <!-- May not work in the future, just change source -->
					 <source src="https://exit109.com/~dnn/clips/RW20seconds_1.mp4#t=.1" type="video/mp4">
				 </video>
			 </div>
			 <div class="story__slide swiper-slide">
			 	<img src="https://picsum.photos/450/810" />
			 </div>
		 </div>
		 
		 <div class="story__next swiper-button-next"></div>
		 <div class="story__prev swiper-button-prev"></div>

		 <div class="story__pagination swiper-pagination"></div>
	 </div>
</div>

3. Add the following CSS code to your project to style the story slider. Customize the CSS code to adjust the slider’s appearance to match your website’s design. You can modify the dimensions, border radius, and other styling properties in the .story__slider and .story__slide CSS classes.

.story__slider {
  width: 450px;
  height: 800px;
  border-radius: 6px;
  overflow: hidden;
}
.story__slide {
  position: relative;
}
.story__slide video,
.story__slide img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.story__pagination {
  bottom: unset !important;
  top: 8px !important;
  display: flex;
  padding: 0 4px;
}
.story__pagination .swiper-pagination-bullet {
  flex-grow: 1;
  border-radius: 100vh;
  height: 3px;
  margin: 0 2px !important;
  background-color: rgba(247, 247, 245, 0.4);
  opacity: 1;
}
.story__pagination .swiper-pagination-bullet .swiper-pagination-progress {
  height: 100%;
  width: 0%;
  border-radius: 100vh;
  background-color: #f7f7f5;
}
.story__prev, .story__next {
  height: 100%;
  width: 50%;
  top: 0;
  margin-top: 0;
}
.story__prev::after, .story__next::after {
  content: none;
}
.story__prev {
  left: 0;
}
.story__next {
  right: 0;
}

4. Ensure you have the necessary CDN links for Swiper JS and jQuery at the end of your body element.

<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.1.0/swiper-bundle.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js'></script>
<script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>

5. Finally, copy and paste the following JavaScript code into your script section or a separate JavaScript file.

//set video duration
const videos = document.querySelectorAll('.story__slide video');
videos.forEach(video => {
	$(video).parent('.story__slide').attr('data-swiper-autoplay', video.duration * 1000);
});

const slider = new Swiper(".story__slider", {
	speed: 1,
	watchSlidesProgress: true,
	loop: true,
	autoplay: {
		delay: 15000,
		disableOnInteraction: false
	},
	slidesPerView: 1,
	navigation: {
		nextEl: ".story__next",
		prevEl: ".story__prev",
	},
	pagination: {
		el: '.story__pagination',
		renderBullet: function (index, className) {
			return '<div class="' + className + '"> <div class="swiper-pagination-progress"></div> </div>';
		}
	},
	on: {
		autoplayTimeLeft(swiper, time, progress) {
			let currentSlide = document.querySelectorAll('.story__slider .swiper-slide')[swiper.activeIndex]
			let currentBullet = document.querySelectorAll('.story__slider .swiper-pagination-progress')[swiper.realIndex]
			let fullTime = currentSlide.dataset.swiperAutoplay ? parseInt(currentSlide.dataset.swiperAutoplay) : swiper.params.autoplay.delay;

			let percentage = Math.min( Math.max ( parseFloat(((fullTime - time) * 100 / fullTime).toFixed(1)), 0), 100) + '%';

			gsap.set(currentBullet, {width: percentage});
		},
		transitionEnd(swiper) {
			let allBullets = $('.story__slider .swiper-pagination-progress');
			let bulletsBefore = allBullets.slice(0, swiper.realIndex);
			let bulletsAfter = allBullets.slice(swiper.realIndex, allBullets.length);
			if(bulletsBefore.length) {gsap.set(bulletsBefore, {width: '100%'})}
			if(bulletsAfter.length) {gsap.set(bulletsAfter, {width: '0%'})}

			let activeSlide = document.querySelectorAll('.story__slider .swiper-slide')[swiper.realIndex];
			if (activeSlide.querySelector('video')) {
				activeSlide.querySelector('video').currentTime = 0;
			}
		},
	}
});

That’s all! hopefully, you have successfully created Stories Slider in HTML CSS JS. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.