automatic image slider in html css

Naim Haidar Ahmad answered on July 6, 2021 Popularity 10/10 Helpfulness 4/10

answer automatic image slider in html css

related automatic slide show of pictures html css

automatic image slider in html css

Comment

<style>
         * {
 	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;
 	}
 }
    </style>
<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>

Popularity 10/10 Helpfulness 4/10 Language html

Source: www.codingflicks.com

Tags: css html image-slider

Link to this answer
Share Copy Link

Contributed on Dec 28 2022

Naim Haidar Ahmad

0 Answers Avg Quality 2/10

Closely Related Answers

automatic slide show of pictures html css

Comment

ddvfsd

Popularity 1/10 Helpfulness 1/10 Language html

Source: Grepper

Tags: css html show slide

Link to this answer
Share Copy Link

Contributed on Jul 06 2021

Wicked Wolf

0 Answers Avg Quality 2/10

automatic image slider in html css

Contents

More Related Answers

automatic image slider in html css

Closely Related Answers

automatic slide show of pictures html css

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.