In this article you will learn how to create automatic multiple image slider using HTML and CSS.
I have shared many types of Automatic Image Slider tutorials with you before. But they were simple designs. Here I show how to create simple automatic multiple image slideshow.
Here I have not used any javascript or jquery i.e. created this multiple image slider using only html and css.
If you are a beginner and want to create an automatic image slider using HTML CS then this tutorial will definitely help you.
Automatic Multiple Image Slider
Earlier I shared another design which is made with the help of JavaScript. If you want to create automatic image slider using javascript then you can see those designs. You can use the demo section below to preview this design.
See the Pen Background Image Slider Using HTML CSS by Ground Tutorial (@groundtutorial) on CodePen.
As you can see in the preview above, this is a simple Automatic Multiple Image Slider design with multiple images side by side. Images are placed side by side using CSS display: flex.
Automatic Multiple Image Slider using HTML CSS
Now if you want to create this CSS Multiple Image Slider then follow the tutorial below. Although you will find all the source code below the article. But here I have shared step by step tutorial.
1. Basic structure of Multiple Image Slider
Using the following html and css codes I will create the required structure for this automatic image slider. First I added the images with some html. Then I did the basic design of the slider with some css.
Here the slider is max-width: 1024px and position: absolute. Besides, I used transform: translate(-50%, -50%), top: 50%, left: 50% to place the slider in the middle of the webpage.
<header>
<div class="row small">
<div class="imagegroup" style="animation-delay: 1s;">
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wm5vqieec4mjwoyzi8x1.jpg" alt="">
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m7jakmy309bzbuhbjfn4.jpg" alt="">
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/roj2muylbkhsm39450mg.jpg" alt="">
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yp16bsz6ihecztrww91w.jpg" alt="">
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/niqqsvmzx1k3n03kv5fk.jpg" alt="">
</div>
</div>
</header>
2. Design the images of the Image Slider
Now the images of Automatic Multiple Image Slider have been designed by some css. Here I used display: flex to keep the images side by side and border: 3px solid white around the images to create some space between each image.
header {
max-width: 1200px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
width: 100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}.row {
display: flex;
overflow: hidden;
}
.imagegroup {
display: flex;
width: 100%;
}
.imagegroup img{
flex-shrink: 0;
object-fit: cover;
border: 3px solid white;
}
3. Enable the Automatic Multiple Image Slider
Above we have designed the basic of this project (automatic multiple image slider in html css) but the slider is not changed automatically.
Now using css animation and @keyframes the images of the slider should be changed automatically. 20 seconds of animation has to be uploaded here. As a result, we will see an image every 20 seconds.
.imagegroup {
animation: travel 20s ease-in-out infinite;
}
@keyframes travel {
0%, 100% {
transform: translate3d(0,0,0);
}
50% {
transform: translate3d(-100%,0,0);
}
}
Hope the above tutorial has helped you completely to know how I have created this automatic multiple image slider using html css.
Earlier I have shared more advanced automatic image slider designs. You will get all the source code on the download button below. Please comment how you like this design (Automatic Multiple Image Slider Using HTML CSS).