Welcome to today’s tutorial. Today we are going to create an auto image slideshow. And for this, all we need is HTML and CSS. No javascript is required.
An auto image slideshow is a group of images that slide from one image to the next one automatically. These slideshows are a great way to display multiple images on your website. The slides can have various kinds of transitions as they change like – slide-out, fadeout and more. For this tutorial, we will use the classic slide-out effect.
If you need a slideshow with manual controls and navigation, you should check out this tutorial here.
Video tutorial:
If you would like to code along with me, you should check out the youtube video below:
HTML:
Let us begin by creating an HTML file with the name – “index.html”. Copy the code below and paste it into your HTML file. The HTML file contains a div element with the class name container. This container wraps up the element with class wrapper. The wrapper contains the images we need to be displayed in the slideshow. In this tutorial, we will be using four images. Since we are using CSS animations, we should try not to use more than 4/5 images. The reason for this is that the keyframes get more complicated as we add more images.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auto slideshow</title>
<!--Stylesheet-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="wrapper">
<img src="image-1.jpg">
<img src="image-2.jpg">
<img src="image-3.jpg">
<img src="image-4.jpg">
</div>
</div>
</body>
</html>
CSS:
Now to get the slideshow actually working we need to add animations. For that, let us create a CSS file with the name – style.css. Copy the code below and paste it into the CSS file you have just created.
We start with the usual CSS reset that removes the unwanted margins and paddings from all the elements. Further, for every element, we set the box-sizing to ‘border-box. It means that border and padding are included in elements total height and width. We set the background colour to a fresh shade of blue – #7aacff;
We now style the container. For the dimensions of the container, we set the width to 85vmin that is 85% of the smaller viewport dimension. Next, we centre this container and a thick white border around it. To make it pop out, we add some box-shadow to it.
We set the width of the wrapper to 100%, so it covers the whole container. Since we set the display property of the wrapper to flex, the images are placed side by side. This is because the default value of flex-direction is row.
Now to make these images loop we use keyframes. We use the animation property with animation-name – slide, animation-duration – 16s and animation-iteration-count to infinite. We want the wrapper to stay still at the same place for a few seconds before sliding to the new image.
The keyframes began at 0% and the wrapper remains at the same position throughout the 25% of the keyframes. At 25% the wrapper shifts to left using the transform property. We repeat these keyframes till we have reached the fourth image at translateX(-300%).
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: #7aacff;
}
.container{
width: 85vmin;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
overflow: hidden;
border: 20px solid #ffffff;
border-radius: 8px;
box-shadow: 10px 25px 30px rgba(30,30,200,0.3);
}
.wrapper{
width: 100%;
display: flex;
animation: slide 16s infinite;
}
@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%{
transform: translateX(-300%);
}
}
img{
width: 100%;
}
That’s it for this tutorial. If you have any doubts, suggestions and feedbacks, do comment below. For more such tutorials, check out my youtube channel. Or you can download the code by clicking on the “Download Code” button below.
best trading knowledge
I love this work. thanks a lot.
I just finished learning HTML and CSS.
so I want to improve on it. I found the work useful. but I cannot explain while after the first image showed completely, all others cut out and slide in part of the next image