Slideshow widget with HTML and CSS

We will build the slideshow widget with HTML and CSS. Below you will find the relevant HTML and CSS code. You must add the images yourself.

The HTML code

The following html code was used in the video:

In the code above you need to change the images to the filenames of your own images.

You can see that the html code is very simple. We create a div with the class "slideshow" and in this div we put some images.

Now to get the slideshow effect, you need some CSS code.

The CSS code

To turn the div with the images into a slideshow, we use the following CSS code:

Option: view- width:100vw, view- height:38vh, vw width effects header/menu mobile width, vh vw = device height and width

.slideshow {
width:100%;
height:auto;
padding:5px;
box-sizing:border-box;
position:relative;
}

.slideshow img {
position:absolute;
animation:slideshow 20s infinite;
opacity:0;
width: 100%;
height: auto;
}

@keyframes slideshow {
25%{opacity:1;
}
45%{
opacity:0;
}
}

.slideshow img:nth-child(4){animation-delay:0s;}
.slideshow img:nth-child(3){animation-delay:5s;}
.slideshow img:nth-child(2){animation-delay:10s;}
.slideshow img:nth-child(1){animation-delay:15s;}

Explanation of the CSS code

If we take a look at this CSS code, a number of things stand out. For example, we give the div with the slideshow class a width of 100%. This means that the slideshow will take up 100% of the width of its parent element. This ensures that your slideshow is also displayed properly on smaller screens (mobile phones).

You could also give the slideshow a fixed width, but then a horizontal scroll bar could arise on smaller screens and the whole thing is therefore not mobile friendly.

We also see that the images in the class slideshow (img) get an opacity of 0. They are therefore completely transparent, which also makes them invisible. And we add an animation called slideshow. We set the duration of the animation (20 seconds in the code above) and with "infinite" we indicate that the animation is on repeat.

With the keyframes we determine what the animation should be. Notice that at 25% of the duration of the image animation, the opacity of the image should be 1, so completely opaque and therefore completely visible. And at 45% of the animation, the image should get an opacity of 0 again, so completely transparent. For fast fade in fade out transition, 10%, 15%

This creates the effect that the image is first completely transparent, then changes to not transparent at all and back to transparent again. The picture appears and then disappears again.

In the last piece of CSS code you can see that we indicate for each of the images exactly when the animation should start. The total duration of the animation is 20 seconds. The animation starts immediately for picture 4. After 5 seconds the same animation follows for picture 3. After 10 seconds picture 2 and after 15 seconds picture 1. And then it starts all over again.

By the way, in the last piece of CSS code there is a useful function. You can style exactly the relevant child elements of a certain element with nth-child. The class slideshow has 4 child elements, the 4 pictures. This allows you to determine exactly what should apply to which image.

For example, if you want to control styling for the third image, use nth-child(3). If you want to know more about this. For more info on this read up on nth-child.