MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to create slideshow with HTML5 and CSS

This tutorial will cover the insight into how we can create a slideshow in HTML5 and CSS.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

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="X-UA-Compatible" content="IE=Edge"> 
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Display Slide Show</title>
  <style>
    #slideShowImages { 
      border: 1px gray solid;
      background-color: lightgray;
    }   
  
    #slideShowImages img { 
      border: 0.8em black solid;
      padding: 3px;
    }   
  </style>
</head>

<body>
  <div id="slideShowImages">
    <img class='imagem_artigo' src="img/photos/1.png" alt="Slide 1" />
    <img class='imagem_artigo' src="img/photos/2.png" alt="Slide 2" />
    <img class='imagem_artigo' src="img/photos/3.png" alt="Slide 3" />    
    <img class='imagem_artigo' src="img/photos/4.png" alt="Slide 4" />
  </div>  
  <button id="slideShowButton"></button> 
  <script src="slideShow.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 JS file

Following is the Java Script to run the slide show.

Listing 2: Java Script to run the slide show

window.addEventListener('load', slideShow, false);

function slideShow() {  
  var globals = {
    slideDelay: 1500, 
    fadeDelay: 35, 
    wrapperID: "slideShowImages", 
    buttonID: "slideShowButton", 
    buttonStartText: "Start Slide Show",
    buttonStopText: "Stop Slide Show", 
    wrapperObject: null, 
    buttonObject: null, 
    slideImages: [], 
    slideShowID: null, 
    slideShowRunning: true, 
    slideIndex: 0 
  }   
  // Initialize globals
  initializeGlobalsData();    
  if ( insufficientSlideShowMarkupData() ) {
    return; 
  }
 
  if (globals.slideImages.length == 1) {
    return; 
  }
  initializeSlideShowMarkupData();  
  globals.wrapperObject.addEventListener('click', toggleSlideShowData, false);   
  if (globals.buttonObject) {
    globals.buttonObject.addEventListener('click', toggleSlideShowData, false); 
  }   
  startSlideShow();  
  function initializeGlobalsData() {   
    globals.wrapperObject = (document.getElementById(globals.wrapperID) ? document.getElementById(globals.wrapperID) : null);
    globals.buttonObject = (document.getElementById(globals.buttonID) ? document.getElementById(globals.buttonID) : null);       
    if (globals.wrapperObject) {
      globals.slideImages = (globals.wrapperObject.querySelectorAll('img') ? globals.wrapperObject.querySelectorAll('img') : []);
    }
  } 
  function insufficientSlideShowMarkupData() {
    if (!globals.wrapperObject) { 
      if (globals.buttonObject) {
        globals.buttonObject.style.display = "none"; 
      }
      return true;
    }
    if (!globals.slideImages.length) { 
      if (globals.wrapperObject) {
        globals.wrapperObject.style.display = "none"; 
      }    
      if (globals.buttonObject) {
        globals.buttonObject.style.display = "none"; 
      }    
      return true;
    }    
    return false; 
  }  
  function initializeSlideShowMarkupData() {  
    var slideWidthMax = maxSlideWidthData(); 
    var slideHeightMax = maxSlideHeightData();     
    globals.wrapperObject.style.position = "relative";
    globals.wrapperObject.style.overflow = "hidden"; 
    globals.wrapperObject.style.width = slideWidthMax + "px";
    globals.wrapperObject.style.height = slideHeightMax + "px";    
    var slideCount = globals.slideImages.length;
    for (var i = 0; i < slideCount; i++) { 
      globals.slideImages[i].style.opacity = 0;
      globals.slideImages[i].style.position = "absolute";
      globals.slideImages[i].style.top = (slideHeightMax - globals.slideImages[i].getBoundingClientRect().height) / 2 + "px";   
      globals.slideImages[i].style.left = (slideWidthMax - globals.slideImages[i].getBoundingClientRect().width) / 2 + "px";               
    }    
    globals.slideImages[0].style.opacity = 1;         
    if (globals.buttonObject) {
      globals.buttonObject.textContent = globals.buttonStopText;
    }
  }     
  function maxSlideWidthData() {
    var maxWidth = 0;
    var maxSlideIndex = 0;
    var slideCount = globals.slideImages.length;    
    for (var i = 0; i < slideCount; i++) {
      if (globals.slideImages[i].width > maxWidth) {
        maxWidth = globals.slideImages[i].width;
        maxSlideIndex = i; 
      }
    }
    return globals.slideImages[maxSlideIndex].getBoundingClientRect().width; 
  } 
    
  function maxSlideHeightData() {
    var maxHeight = 0;
    var maxSlideIndex = 0;    
    var slideCount = globals.slideImages.length;    
    for (var i = 0; i < slideCount; i++) {
      if (globals.slideImages[i].height > maxHeight) {
        maxHeight = globals.slideImages[i].height; 
        maxSlideIndex = i; 
      }
    }    
    return globals.slideImages[maxSlideIndex].getBoundingClientRect().height; 
  } 
  function startSlideShow() {
    globals.slideShowID = setInterval(transitionSlidesData, globals.slideDelay);                
  }   
  function haltSlideShow() {
    clearInterval(globals.slideShowID);   
  }   
  function toggleSlideShowData() {
    if (globals.slideShowRunning) {
      haltSlideShow();
      if (globals.buttonObject) { 
        globals.buttonObject.textContent = globals.buttonStartText; 
      }
    }
    else {
      startSlideShow();
      if (globals.buttonObject) { 
        globals.buttonObject.textContent = globals.buttonStopText; 
      }            
    }
    globals.slideShowRunning = !(globals.slideShowRunning);
  } 
  function transitionSlidesData() {
    var currentSlide = globals.slideImages[globals.slideIndex];    
    ++(globals.slideIndex);
    if (globals.slideIndex >= globals.slideImages.length) {
      globals.slideIndex = 0;
    }    
    var nextSlide = globals.slideImages[globals.slideIndex];    
    var currentSlideOpacity = 1; 
    var nextSlideOpacity = 0; 
    var opacityLevelIncrement = 1 / globals.fadeDelay;
    var fadeActiveSlidesID = setInterval(fadeActiveSlidesData, globals.fadeDelay);
    
    function fadeActiveSlidesData() {
      currentSlideOpacity -= opacityLevelIncrement;
      nextSlideOpacity += opacityLevelIncrement;      
      if (currentSlideOpacity >= 0 && nextSlideOpacity <= 1) {
        currentSlide.style.opacity = currentSlideOpacity;
        nextSlide.style.opacity = nextSlideOpacity; 
      }
      else {
        currentSlide.style.opacity = 0;
        nextSlide.style.opacity = 1; 
        clearInterval(fadeActiveSlidesID);
      }        
    } 
  }   
}

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 3: 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 4: 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 slideshow looks like this:

 Showing changing Slideshow

Figure 1: Showing changing Slideshow

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

Listing 5: 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 6: The animation will be paused and we’ll just run it on hover:

	.hs-wrapper:hover img{
    animation-play-state: running;
}
<strong>Listing 7</strong>: 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 8: 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.



Website: www.techalpine.com Have 16 years of experience as a technical architect and software consultant in enterprise application and product development. Have interest in new technology and innovation area along with technical...

What did you think of this post?

Did you like the post?

Help us to keep publishing good contents like this.

SUPPORT US

funded

remaining

[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login