Posted on March 25, 2021, 8 p.m. by Bishal ( 15729)
@keyframes
property of the CSS to change the images after a certain interval. CSS @keyframes
rules specify the code for the animation. !important does not work inside the @keyframes
code.
@keyframes animationName{
//selectors here
0% {
//CSS Code here
}
100% {
//CSS Code here
}
// or use
from{
//CSS Code here
}
to{
//CSS Code here
}
}
index.html
index.html
<!DOCTYPE html>
<html>
<head>
<title>Image Slider - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
</body>
</html>
div
items that will work as an Image container.
<div class="slideshow">
<div class="slide-wrapper">
<div class="image-container"></div>
<div class="image-container"></div>
<div class="image-container"></div>
<div class="image-container"></div>
<div class="image-container"></div>
</div>
</div>
style.css
<head> </head>
of your HTML document:<link href="style.css" rel="stylesheet">
style.css
file:.slideshow {
overflow: hidden;
height: 500px;
width: 728px;
margin: 0 auto;
}
.slide-wrapper {
width: 3000px;
animation: slide 18s infinite;
}
.image-container{
margin-top: 50px;
float: left;
height: 500px;
width: 728px;
}
<!DOCTYPE html>
<html>
<head>
<title>Image Slider - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
<div class="slideshow">
<div class="slide-wrapper">
<div class="image-container"></div>
<div class="image-container"></div>
<div class="image-container"></div>
<div class="image-container"></div>
<div class="image-container"></div>
</div>
</div>
</body>
</html>
.slideshow {
overflow: hidden;
height: 500px;
width: 728px;
margin: 0 auto;
}
.slide-wrapper {
width: 3000px;
animation: slide 18s infinite;
}
.image-container{
margin-top: 50px;
float: left;
height: 500px;
width: 728px;
}
.image-container:nth-child(1) {
background-image: url("https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1440&q=80") ;
}
.image-container:nth-child(2) {
background-image: url("https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=751&q=80") ;
}
.image-container:nth-child(3) {
background-image: url("https://images.unsplash.com/photo-1433086966358-54859d0ed716?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80") ;
}
.image-container:nth-child(4) {
background-image: url("https://images.unsplash.com/photo-1586348943529-beaae6c28db9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=358&q=80") ;
}
@keyframes slide {
20% {margin-left: 0px;}
30% {margin-left: -728px;}
50% {margin-left: -728px;}
60% {margin-left: -1456px;}
70% {margin-left: -1456px;}
80% {margin-left: -2184px;}
90% {margin-left: -2184px;}
}