Stories Slider In HTML CSS JS

Stories Slider In HTML CSS JS
Code Snippet:Instagram Stories inspired slider with SwiperJs
Author: MarcoSandri
Published: January 10, 2024
Last Updated: January 22, 2024
Downloads: 2,200
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X