The Image Slider is also called Image Carousel or Slideshow. The Automatic Image Slider may be the convenient way to display the changing or sliding images one by one on your website. In this Automatic Image Slider, the images will automatically slide one by one, the users need not change the images manually.
To make the image slide automatically, the @keyframes property is used. The @keyframe rule specifies the image which gradually changes from the current image to the new image at a certain time.
In this Responsive Automatic Image Slider, five images move forward one by one and after all the images move forward it reverses all the images, and this repeats again and again. In this Responsive Automatic Image Slider, you can give the image as much you want.
The source code of this Responsive Automatic Image Slider using HTML & CSS is given below, and you can copy the source code of this program. You can use this code of Responsive Automatic Image Slider with your creativity and can take this card to the next level.
Responsive Automatic Image Slider using HTML & CSS [Source Code]
To make this website, you would like to make two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
body {
margin: 10px;
font-family: 'Poppins', Arial, Helvetica, sans-serif;
background-color: #2AF598;
display: flex;
flex-direction: column;
}
.auto-slider{
position: relative;
box-sizing: content-box;
display: inline-block;
padding: 10px 10px 20px;
background: #121;
max-width: 720px;
margin: 20px auto;
overflow: hidden;
border-radius: 4px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left;height:500px }
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 45s sliding ease infinite;
}
/* Slider indicator */
.indicator{
width: 100%;
max-width: 720px;
height: 6px;
background: #2AF598;
position: absolute;
bottom: 0;
animation: indicating 9s ease infinite;
}
@keyframes sliding{
0%{left: 0%; }
20%{left: -100%;}
40%{left: -200%;}
60%{left: -300%;}
80%{left: -400%;}
100%{left: 0%;}
}
@keyframes indicating{
from{
left: -100%;
}
to{
left: 0;
}
}
.credit{
text-align: center;
color: #000;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
text-decoration: none;
color:#000;
font-weight: bold;
}
Thank you for reading our blog. If you face any problem in creating this Responsive Automatic Image Slider using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
إرسال تعليق
Thank you
Learning robo team