Automatic Image Slider in HTML CSS

In this blog, we will share a CSS animation snippet about the automatic image change effect. You can also call it automatic slideshow animation. We used simple HTML and CSS to create this snippet. Before collecting the source code, I suggest you watch the video tutorial below. It will help you to get a fair idea about the snippet. We publish regular videos on front-end development on our YouTube Channel. If you want, you can subscribe to our youtube channel.

I hope you have watched the video and understood how it was made. The first question that comes to our mind is "What is an automatic image slider? An automatic image slider shows images by one. There will be no indicators or controls in the slideshow. The process is automatic. Advanced functionalities will not be there as no javascript was used. This project might be helpful for you if you're not learning javascript at the moment and want to make your own CSS slider.

We took a 'banner-text' div in order to show the content above the slideshow. We used some random text to make banner content. The images part comes after that. our divs were placed inside a div called 'banner'. Each of them had the same name. Each div had a separate background image. We gave each 'banner-img' div a separate animation name and used keyframes animation property to create the animation. They were given a scale effect and an opacity so that they could create a ken burns effect by changing one image to another. If you haven't already watched the video, go and watch it.

You May Also Like:

Automatic Image Slider in HTML CSS [ Source Code ]:

You've got to start by creating two new files. We are using two separate files, one is HTML and the other is CSS. Copy the codes listed below and paste them into the corresponding fields in the related files. You can open the code in the browser if you save the code. If it is working or not, you should check it out. If you're having problems with the code, you can download the file from the button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Automatic Image Chanege Animation | No javascript</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <div class="banner-text">
       <h1>Fitness <span>Gym</span></h1>
       <p>Get your best body ever</p>
   </div>
      
  <div class="banner">
    <div class="banner-img" style="background-image: url('1.jpg')"></div>
    <div class="banner-img" style="background-image: url('2.jpg')"></div>
    <div class="banner-img" style="background-image: url('3.jpg')"></div>
    <div class="banner-img" style="background-image: url('4.jpg')"></div>
  </div>
</body>
</html>

ADD CSS:

body {
	overflow: hidden;
	margin: 0;
	padding: 0;
}
.banner {
	position: absolute;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}
.banner-img {
	position: absolute;
	width: 100%;
	height: 100%;
	background: no-repeat 50% 50%;
	background-size: cover;
	animation: animate 15s linear infinite;
	opacity: 1;
	transform: scale(1.2);
}
.banner-img:nth-child(1) {
	animation-name: animate-1;
	z-index: 3;
}
.banner-img:nth-child(2) {
	animation-name: animate-2;
	z-index: 2;
}
.banner-img:nth-child(3) {
	animation-name: animate-3;
	z-index: 1;
}
.banner-img:nth-child(4) {
	animation-name: animate-4;
	z-index: 0;
}
@keyframes animate-1 {
	0% {
		opacity: 1;
		transform: scale(1.2);
	}
	1.5% {
		opacity: 1;
	}
	23% {
		opacity: 1;
	}
	26% {
		opacity: 0;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(1.2);
	}
	98% {
		opacity: 0;
		transform: scale(1.22);
	}
	100% {
		opacity: 1;
	}
}
@keyframes animate-2 {
	23% {
		opacity: 1;
		transform: scale(1.2);
	}
	26% {
		opacity: 1;
	}
	48% {
		opacity: 1;
	}
	51% {
		opacity: 0;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(1.2);
	}
}
@keyframes animate-3 {
	48% {
		opacity: 1;
		transform: scale(1.2);
	}
	51% {
		opacity: 1;
	}
	73% {
		opacity: 1;
	}
	76% {
		opacity: 0;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(1.2);
	}
}
@keyframes animate-4 {
	73% {
		opacity: 1;
		transform: scale(1.2);
	}
	76% {
		opacity: 1;
	}
	98% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: scale(1);
	}
}
.banner-text {
	background-color: rgba(0, 0, 0, 0.75);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 70px;
	z-index: 50;
	width: 500px;
	height: 168px;
	border: 10px ridge #fff;
}
.banner-text h1 {
	text-align: center;
	font-family: montserrat;
	text-transform: uppercase;
	line-height: 1.2;
	color: #fff;
	font-size: 67px;
	color: darkorange;
	margin: 0;
	font-weight: 900;
}
.banner-text p {
	color: rgba(255, 255, 255, 0.5);
	text-align: center;
	font-family: montserrat;
	text-transform: uppercase;
	font-size: 26px;
}

I hope you have implemented the code successfully. We Have lots of front-end-related snippets with source codes on our website. On the homepage, you can click the “load more” button to visit those. If you enjoy the snippets and articles on this website, please share them with other like-minded people. We're glad you found our website, and we want to thank you for visiting us.

DOWNLOAD CODE

Automatic Image Slider in HTML CSS [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Automatic Image Slider in HTML CSS

Automatic Image Slider in HTML CSS [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form