How to create slideshow with HTML5 and CSS

A web design that we make with different applications should be used on different platforms.Designers prefer to build their web sites using the newest applications, and one of the best web application is HTML5. We create many variations with HTML5 such as web designs, flash, jQuery and much more. Its implementations are appearing all over the world. Web designers are already switching to HTML 5 platform because they get fruitful results in their design assignments using HTML5. It’s a powebful web application. So many web designers and developers have started using HTML5. and web pages now become more semantic with tags.

It gives web designers and developers new abilities. It expanded the possibilities of the web designs. That’s why HTML5 is becoming popular. So every web designer and developer should know about the basic compatibility and features of this powebful web application. Today we will see the role of HTML5 in coming up with a slideshow in web developments.

The first step in the slideshow creation process is to define the show duration, grab the container and slideshow items, etc. Then we cycle through each image/slide to set its opacity to 0 if it's not in the first position. Next we create the function that fades out the current image and fades in the next image. The last step is directing the slideshow to start when the page has completed loading.

Browser Compatibility

Essentially all web browsers supporting HTML5 standard would be able to run this application and its derivatives. In particular, the list of all major browsers fully/partially compatible with HTML5 follows:

Mozilla FireFox 4 and higher
Google Chrome 10 and higher
Microsoft IE 9 and higher (some issues noticed with colour gradients and text rotation)
Apple Safari 5 and higher

Listing 1: Using html5-slideshow.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>An HTML5 Slideshow</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="slideshow">
    <ul class="slides">
        <li><img src="img/photos/1.jpg" width="620" height="320" alt="House" /></li>
        <li><img src="img/photos/2.jpg" width="620" height="320" alt="Beach" /></li>
        <li><img src="img/photos/3.jpg" width="620" height="320" alt="Poweb Station" /></li>
        <li><img src="img/photos/4.jpg" width="620" height="320" alt="Colours of Nature" /></li>
    </ul>
    <span class="arrow previous"></span>
    <span class="arrow next"></span>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>

First we have the HTML5 doctype, followed by the head section of the document. After the title tag and the stylesheet we move on to the body.

We can see that the markup for the slideshow is really simple. The main containing div, #slideshow, holds an unordered list and the previous and next arrows. The unordered list holds the slides, with each defined as an <li> element. As shown in the illustration above, this is where the elements with the modified versions of the images are inserted.

The way that we'll be setting up this slideshow is basically through the use of a modified version of CSS sprites. The idea is to create one big image containing all of our slides then to use keyframe animations to reveal specific portions of the image at certain points in the animation.

The CSS

The slideshow uses images of the same size. The containing div now has a set height and width, with any overflow hidden:

Listing 2: Slideshow Gallery

Div#gallery, div#gallery img {
width: 400px; height: 400px; overflow: hidden; float: left; }
div#gallery img { transition: all 2s linear;  }
div#gallery img:hover, div#gallery img:hover + img {
transform: translate(0, -400px); }

The CSS is relatively straightforward: the containing div and images inside have the same qualities, so their base styles may be grouped under the first style declaration: float applied to the images removes any trace of a gap between them. Hovering over the first image moves it up 400 pixels (the height of the image) while the paired adjacent selector ensures that the next image moves in the same way, at the same time.

All the styles for the slideshow reside in styles.css. We’ve used the #slideshow id of the main containment element as a namespace, so we can easily append these styles to web stylesheet without worrying about conflicts.

It has a nice slide effect that works in all modern browsers -which also degrades gracefully when needed- using the CSS3 transition property and transform property's translateX function.

Listing 3: Using styles.css

#slideshow{
    background-colour:#F5F5F5;
    border:1px solid #FFFFFF;
    height:340px;
    margin:150px auto 0;
    position:relative;
    width:640px;
    -moz-box-shadow:0 0 22px #111;
    -webkit-box-shadow:0 0 22px #111;
    box-shadow:0 0 22px #111;
}
#slideshow ul{
    height:320px;
    left:10px;
    list-style:none outside none;
    overflow:hidden;
    position:absolute;
    top:10px;
    width:620px;
}
#slideshow li{
    position:absolute;
    display:none;
    z-index:10;
#slideshow li:first-child{
    display:block;
    z-index:1000;
}
#slideshow .slideActive{
    z-index:1000;
}
#slideshow canvas{
    display:none;
    position:absolute;
    z-index:100;
}
 #slideshow .arrow{
    height:86px;
    width:60px;
    position:absolute;
    background:url('img/arrows.png') no-repeat;
    top:50%;
    margin-top:-43px;
   cursor:pointer;
    z-index:5000;
}
#slideshow .previous{ background-position:left top;left:0;}
#slideshow .previous:hover{ background-position:left bottom;}
#slideshow .next{ background-position:right top;right:0;}
#slideshow .next:hover{ background-position:right bottom;}

Customizing the Slideshow

Simply replace URL OF IMAGE with the Image link and replace bolded black texts with web preferred headings and descriptions. We can play around how the slider appears. If we want the slider to appear from bottom then change the class to bottom, if we want the slider to appear from right then change it to right and so on. If we wish we can set all sliders to bottom or top or to any position we wish.

If we want to slow down the speed with which the slider comes and goes, then set timeOut: 3000 to a higher value like 4000 or 5000.

So take images of equal size and then play around the sizes’ width: 590px and height: 335px We can note that the width size i.e (590px) is greater than the actual image size of 550px. We will have to keep the width 20-40px greater than the actual image size so that the image may perfectly fit into the slide.

There are lots of tools and applications - some free, some paid - which create photo slide shows or photo galleries. We have shown how to create a photo slide which uses the visible css property to provide a degree of animation.

Using the CSS Overflow Property

This first solution uses the CSS overflow property to achieve a similar result in HTML.

The slide show looks like this:

Figure 1: Slideshow appearance

We’ll show and hide the images using an animation:

Listing 4: Displaying and hiding images using animation

.hs-wrapper img{
    top: 0px;
    left: 0px;
    position: absolute;
    animation: showMe 0.8s linear infinite 0s forwards;
    animation-play-state: paused;   
}

Listing 5: The animation will be paused and we’ll just run it on hover:

.hs-wrapper:hover img{
    animation-play-state: running;
}

Listing 6: The animation will simply make an image visible and put it on top of the “stack”:

@keyframes showMe {
    0% { visibility: visible; z-index: 100; }
    12.5% { visibility: visible; z-index: 100; }
    25% { visibility: hidden; z-index: 0; }
    100% { visibility: hidden; z-index: 0; }
}

As we can see, each image will have the same animation but we will start the animation for each image with a delay. We also want to reverse the stacking order of the images by setting the z-index accordingly. Since we will run the whole animation for 0.8 seconds, we’ll delay the start for each image with 0.1 second (except the first one):

Listing 7: Delaying the start for each image

.hs-wrapper img:nth-child(1){
    z-index: 9;
}
.hs-wrapper img:nth-child(2){
    animation-delay: 0.1s;
    z-index: 8;
}
.hs-wrapper img:nth-child(3){
    animation-delay: 0.2s;
    z-index: 7;
}
.hs-wrapper img:nth-child(4){
    animation-delay: 0.3s;
    z-index: 6;
}
<!-- ... and so on -->

We can increase the opacity level of the background colour of the overlay in order to make the effect more subtle. Note that the images have the same background.. Black and white images with a not too transparent overlay like in Container are a good fit for this effect.

Conclusion

Here we come to the end of this tutorial where we learnt various aspects of creating a slideshow making use of HTML5 and CSS/CSS3. Hope we enjoyed the learning.