Automatic image slider in HTML CSS (Tutorial + Code)

Do you want to create an automatic image slider in HTML CSS?

If your answer is yes, then this automatic image slider will help you. In the meantime, I have shown many more types of manual sliders where the image is changed with the help of navigation buttons. Now is the time to create an automatic slider that can change images automatically.

This type of design is widely used on the homepages or galleries of various websites. Different types of Photoshop or image download websites have a role to play in the design of the image. You can easily create it using only HTML and CSS. If you have a basic idea about HTML and CSS then follow the tutorial below.

What is an Automatic image slider?

An automatic image slider is a type of slider where the image changes automatically at a certain time. There are some designs that can change the image both automatically and manually. Images of this design are changed automatically. There is no option to change it manually.

I used blue as the background for this design and I used a white border around the images. Here I have used 4 images. You can use as many images as you like. Images change every 4 seconds.

Below I have given it a live demo which will help you to know how it works.

See the Pen Auto slideshow by Foolish Developer (@fghty) on CodePen.

How to Create Automatic image slider in HTML CSS

If you want to create an automatic image slider using HTML and CSS then follow the tutorial below.

Step 1: Design the web page

I have designed the webpage using the following CSS. Here I have used light blue in the background color of the webpage. You can use any background color of your choice.

padding: 0;

margin: 0;

box-sizing: border-box;

}

body{

background-color: #0675d0;

}

Step 2: Create the basic structure of the image slider

Now is the time to create the basic structure of this automatic image slider. Border: 10px solid #ffffff has been used to create a border around the slider’s width of 500.

</div>

.container{

width: 500px;

position: absolute;

transform: translate(-50%,-50%);

top: 50%;

left: 50%;

overflow: hidden;

border: 10px solid #ffffff;

border-radius: 8px;

box-shadow: 10px 10px 35px -10px rgba(0,0,0,0.3);

}

Create the basic structure of the image slider

Step 3: Add images to the slider

Now I have added the necessary images. I have used four images here. You can change the image to your liking and increase the number of images. If you want to increase the number of images then you need to make some basic changes in the CSS code which I have shown below.

</div>

Here I have used animation: slide 16s infinite, which means that these four images will be repeated again every 16 seconds. That means it will take 4 seconds for each image to change. With this, I have used infinite which will continue to run until this change infinity time.

If you want the images to change more quickly then you can use any other value instead of these 16 seconds. If you increase the number of images then the total duration time of this animation should be increased.

.wrapper{

width: 100%;

display: flex;

animation: slide 16s infinite;

}

img{

width: 100%;

}

Step 4: Change the images automatically using CSS

Above we have added animation but you have to take the help of @keyframes to make that animation work. Since I have used four images here, I have divided this total of 16 seconds into four parts.

@keyframes slide{

0%{

transform: translateX(0);

}

25%{

transform: translateX(0);

}

30%{

transform: translateX(-100%);

}

50%{

transform: translateX(-100%);

}

55%{

transform: translateX(-200%);

}

75%{

transform: translateX(-200%);

}

80%{

transform: translateX(-300%);

}

100%{