Automatic Image Slider in HTML CSS

Hello visitors, In this blog, I will share another interesting snippet on the Automatic image slider in HTML CSS. You might have seen an image slider with controls using JavaScript. Here I am sharing a full-screen automatic image slider of slideshow without any controls. I have shared many projects on CSS animation examples, JavaScript, Bootstrap, web design, front-end, etc in this blog. Please make sure to check those apart from this project. For this project, please follow the below tutorial for a better understanding.

Thanks for watching the video. I hope you are familiar with the Automatic Image slider or Slider effect. We often use it on our websites. Slider or slideshow is also used on a projection screen or any other electronic display. In a slideshow, we see a presentation of a particular set of images in a certain time interval. The movement could be controlled or automatic.

You May Also Like:

In this project, we will create an automatic image slider with a Ken burns animation. I have used five images and, these images will change automatically after an interval. I have not used javascript or jquery to make this snippet because we can easily make it using CSS Keyframes animation.

First, I have created a div named 'wrapper' and placed five separate div's inside it. I also set background images for each of them using inline CSS. In CSS, I omitted the default margin and padding of the project by setting the margin and padding to zero for the body element. After that, I styled the wrapper div to make it align with the viewport. Then I have given the div's inside the wrapper an absolute position value and 100% width and height so that they can stack on each other. Later set an animation value for the div's as well. I also set separate animation-delay values for each background image so that the slideshow animation can occur one after another after a certain time interval. I used opacity and transform scale value in the keyframes animation so that the image smoothly appears one by one and, ken burns animation also can occur.

Automatic Image Slider in HTML CSS [Source Codes]:

To create this project, you have to create two files. One is the HTML file with the .html extension and, the other one is the CSS file with the .css extension. Link the external file in the HTML. Please copy the code below from the code boxes and paste them into your project and save them. Play around with the values used in this snippet and see how it works.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
	<meta charset="UTF-8">
	<title>Automatic Image Slider in HTML CSS</title>
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="wrapper">
		<div style="background-image:url(https://i.postimg.cc/Gt8rSnFh/1.jpg)"></div>
      <div style="background-image:url(https://i.postimg.cc/0r1gWM5c/2.jpg)"></div>
      <div style="background-image:url(https://i.postimg.cc/MHVZp8v3/3.jpg)"></div>
      <div style="background-image:url(https://i.postimg.cc/wxL9Jgj0/4.jpg)"></div>
      <div style="background-image:url(https://i.postimg.cc/k560mvVf/5.jpg)"></div>
	</div>
</body>
</html>

ADD CSS:

body {
	margin: 0;
	padding: 0;
}
.wrapper {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	position: relative;
	background-color: #000;
}
.wrapper>div {
	width: 100%;
	height: 100%;
	position: absolute;
	animation: animate 25s infinite;
	opacity: 0;
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
}
.wrapper>div:nth-child(2) {
	animation-delay: 5s;
}
.wrapper>div:nth-child(3) {
	animation-delay: 10s;
}
.wrapper>div:nth-child(4) {
	animation-delay: 15s;
}
.wrapper>div:nth-child(5) {
	animation-delay: 20s;
}
@keyframes animate {
	10% {
		opacity: 1;
	}
	20% {
		opacity: 1;
	}
	30% {
		opacity: 0;
	}
	40% {
		transform: scale(1.2);
	}
}

I hope you have successfully created the project. If you like the snippet, please considers subscribing to our channel and press the bell notification icon for a future update. Please follow us on our social media profiles to stay connected with this blog. Thank you for stopping by.

Post a Comment

Post a Comment

About Us

Contact Form

Automatic Image Slider in HTML CSS

You might like

Post a Comment

Post a Comment

Contact Form