How to Create an Image Slide Show using HTML & CSS only

We could add slide shows to make our Webpage attractive. Usually we use java scripts to add attractive slide shows.  But we can also add slide show using HTML and CSS only. Follow my steps…

HTML

Add the required images for your slide show. Take any five images you like. I have used these images you could use if needed.

img1
img1
img2
img2
img3
img3
img4
img4
img5
img5

Insert these images inside <figure> tag. I inserted these inside an id “slide_show”.

CSS

In css we need to add an animation for our slideshow. I had created keyframes slide_show” for this, you could use any name you wish. We had to specify the movement of our slide here.

Give height and width 100%, margin 0 auto to the body. Also give height you needed for your slide_show, make sure you had given overflow hidden. Give 20% width to the images and make it float left.

For the figure, give width 500% because of we are using 5 images here, each would have 100% width. Give left 0 and margin also 0. You should have to make the position to relative which show the images continuously in line.

Specify the time delay you like to give for slide show. You could make it a smooth or speed animation according to your wish. Give infinite to your animation so that it would repeat infinite number of times.

ta-da!!!

Hope that was useful. Leave suggestions and doubts, Thank you…

VIEW DEMO     DOWNLOAD ZIP

Leave a Reply