Automatic Image slider in HTML and CSS

byCodingFlicks -April 14, 2022

0

A slide show is an image or video display on your website. It's similar to a slideshow, showing one image or video at a time. There is a time period during which the content is replaced. The user can move the buttons to the next one by clicking on them. In this article, we are going to create an automatic image slideshow. A fade animation will be added to the project so that the animation looks smooth. There is a video demo of the project that you can view.

You are very likely to see a slideshow on most eCommerce sites, especially those related to fashion, accessories, and beauty. A slide show is an entertaining way to share your images with others. The changes in the images may be automatic and at regular intervals or they may be manually controlled by a viewer. Sliders are easy to use to show off different aspects of your business. This is true. But if you don’t create your sliders with a purpose in mind, your readers will get annoyed and lose interest. Each website is different, so what works for one site doesn’t always work for others.

We have a div named 'wrapper' in this project. Another name was given to the div, called 'box'. Four different boxes have been named 'single-box' inside the 'wrapper' div. The default margin and padding have been removed at the beginning of the project by taking the margin and padding to zero. The project element was aligned with the help of the display flex. We created an animation property for each image of the project. We have set animation-delay values for each image so that they can be animated in a single motion. We have used the transform and opacity values in the animation part of the CSS.

You may also like:

Automatic image slider in HTML and CSS [ Source Code ]:

If you want to create this project, you need to create an HTML and a CSS file. You can paste the code from the below code box into your project. If you are having trouble understanding the code, you can download it from the download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--codingflicks.com-->
<head>
	<meta charset="UTF-8">
	<title>Automatic Image slider in HTML and CSS</title>
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="wrapper box">
		<div class="single-box"><img alt="" src="1.jpg"></div>
		<div class="single-box"><img alt="" src="2.jpg"></div>
		<div class="single-box"><img alt="" src="3.jpg"></div>
		<div class="single-box"><img alt="" src="4.jpg"></div>
	</div>
</body>
</html>

ADD CSS:

 * {
 	padding: 0;
 	margin: 0;
 	box-sizing: border-box;
 }
 .box {
 	display: flex;
 	align-items: flex-start;
 	background: #fff;
 	height: 100vh;
 	overflow: hidden;
 	position: relative;
 }
 .box .single-box img {
 	position: absolute;
 	min-width: 100%;
 	min-height: 100%;
 	height: auto;
 	background: #000;
 	-webkit-backface-visibility: hidden;
 	backface-visibility: hidden;
 	opacity: 0;
 	transform: scale(1.5) rotate(15deg);
 	-webkit-animation: animate 32s infinite;
 	animation: animate 32s infinite;
 }
 .box .single-box:nth-child(3) img {
 	-webkit-animation-delay: 8s;
 	animation-delay: 8s;
 }
 .box .single-box:nth-child(2) img {
 	-webkit-animation-delay: 16s;
 	animation-delay: 16s;
 }
 .box .single-box:nth-child(1) img {
 	-webkit-animation-delay: 24s;
 	animation-delay: 24s;
 }
 @keyframes animate {
 	25% {
 		opacity: 1;
 		transform: scale(1) rotate(0);
 	}
 	40% {
 		opacity: 0;
 	}
 }

That's it, you have created an automatic image slideshow. If you like this project, you can follow us on our social media profiles. People who are interested in learning front-end development and looking for resources can benefit from the articles on this blog. Sharing is caring so please bear that in mind. I want to thank you for visiting this website.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.