How to create a slideshow in pure CSS

In this tutorial I will speak about how to create a slideshow in pure CSS.

As you might know, the new version of CSS(CSS 3) allows us to create beautiful animations. With CSS 3 we can create a lot of kind of animations.

Now, I will explain to you how you can easily create a simple CSS slideshow:

<div id="main">
<div id="slide">
<img src="img1.jpg" />
<img src="img2.jpg" />
<img src="img3.jpg" />
</div>
</div>

As you see, I have writed two divs with three images.

The main div has

height:200px;
width:300px;
overflow:hidden;

The second div contains the images:

#slide{
width:900px;
height:200px;
}
#slide img{
max-height:200px;
max-width:300px;
float:left;
}

To run the slide, I will add -webkit-animation: run 10s; and animation: run 10s; in #slide{}

Next, I will create the animations run:

@-webkit-keyframes run{
50% {margin-left:-300px;}
100% {margin-left:-600px;}
}

@keyframes run{
50% {margin-left:-300px;}
100% {margin-left:-600px;}
}

You can see the results in the video bellow:









Leave a Comment