Awesome Rotating Image Slideshow CSS3 and jQuery

Home Slideshow & ScrollerAwesome Rotating Image Slideshow CSS3 and jQuery

13 years ago Views

13019

2074

tutorialzine

Awesome Rotating Image Slideshow CSS3 and jQuery

we are going to use jQuery and CSS3 rotations, along with the jQuery rotate plugin, to create a beautiful slideshow. You can use it to spice up your web sites, product pages and other projects with some CSS3 magic.

HTML

Following the tradition, we will first lay down the HTML markup of the slideshow. The main container element is the #slideShowContainer div, which holds the #slideShow div and the previous / next links (turned into arrows with CSS).

index.html

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rotating Slideshow With jQuery and CSS3 | Tutorialzine Demo</title>

<link rel="stylesheet" type="text/css" href="css/styles.css" />

</head>
<body>

<div id="slideShowContainer">

    <div id="slideShow">

     <ul>
            <li><img src="img/photos/1.jpg" width="100%" alt="Fish" /></li>
            <li><img src="img/photos/2.jpg" width="100%" alt="Ancient" /></li>
            <li><img src="img/photos/3.jpg" width="100%" alt="Industry" /></li>
            <li><img src="img/photos/4.jpg" width="100%" alt="Rain" /></li>
        </ul>

    </div>

    <a id="previousLink" href="#">»</a>
    <a id="nextLink" href="#">«</a>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="js/jquery.rotate.js"></script>
<script src="js/script.js"></script>

</body>
</html>

The slides are defined as LI elements inside of an unordered list. Notice that the width of the images is set to 100%. This way they will scale according to the width of the #slideShow div.

At the bottom, we include the jQuery library, our own script.js file, and the jQuery rotate plugin. We are using the plugin, so we can work with CSS3 rotations in a cross-browser fashion, as you will see in the last step of this tutorial.

CSS

This layout relies heavily on relative and absolute positioning. You can see the styling of the slideshow below.

styles.css

#slideShowContainer{
 width:510px;
 height:510px;
 position:relative;
 margin:120px auto 50px;
}

#slideShow{
 position:absolute;
 height:490px;
 width:490px;
 background-color:#fff;
 margin:10px 0 0 10px;
 z-index:100;

 -moz-box-shadow:0 0 10px #111;
 -webkit-box-shadow:0 0 10px #111;
 box-shadow:0 0 10px #111;
}

#slideShow ul{
 position:absolute;
 top:15px;
 right:15px;
 bottom:15px;
 left:15px;
 list-style:none;
 overflow:hidden;
}

#slideShow li{
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
}

#slideShowContainer > a{
 border:none;
 text-decoration:none;
 text-indent:-99999px;
 overflow:hidden;
 width:36px;
 height:37px;
 background:url('../img/arrows.png') no-repeat;
 position:absolute;
 top:50%;
 margin-top:-21px;
}

#previousLink{
 left:-38px;
}

#previousLink:hover{
 background-position:bottom left;
}

a#nextLink{
 right:-38px;
 background-position:top right;
}

#nextLink:hover{
 background-position:bottom right;
}

Although the #slideShow div is set to a width of 490px, its full size is actually 510px. This 20px difference scales down the slide images (as they are locked to the width of the #slideShow div), which are reduced from their normal size of 480px down to 460px. As you will see in the next step, we are using a jQuery animation to zoom in the slideshow to its full size. This way, even at full zoom, the images are actually at their regular size and there is no loss of quality

jQuery

Although most modern browsers support CSS3 rotation, it is still rather tedious to work with the various vendor-specific properties. Luckily, there are plugins available that handle the cross-browser nonsense for us. I chose the jQuery rotate plugin, as it also integrates perfectly with the animate() and css() methods of the library, which means we can easily animate the rotation of elements. As you will see in a moment, we are using this in our custom rotateContainer event, which rotates the #slideShow div.

script.js – Part 1

$(document).ready(function(){

 var slideShow = $('#slideShow'),
  ul = slideShow.find('ul'),
  li = ul.find('li'),
  cnt = li.length;

 // As the images are positioned absolutely, the last image will be shown on top.
 // This is why we force them in the correct order by assigning z-indexes:

 updateZindex();

 if($.support.transform){

  // Modern browsers with support for css3 transformations

  li.find('img').css('rotate',function(i){
   // Rotating the images counter-clockwise
   return (-90*i) + 'deg';
  });

  // Binding a custom event. the direction and degrees parameters
  // are passed when the event is triggered later on in the code.

  slideShow.bind('rotateContainer',function(e,direction,degrees){

   // Zooming in the slideshow:

   slideShow.animate({
    width  : 510,
    height  : 510,
    marginTop : 0,
    marginLeft : 0
   },'fast',function(){

    if(direction == 'next'){

     // Moving the topmost image containing Li at
     // the bottom after a fadeOut animation

     $('li:first').fadeOut('slow',function(){
      $(this).remove().appendTo(ul).show();
      updateZindex();
     });
    }
    else {

     // Showing the bottommost Li element on top
     // with a fade in animation. Notice that we are
     // updating the z-indexes.

     var liLast = $('li:last').hide().remove().prependTo(ul);
     updateZindex();
     liLast.fadeIn('slow');
    }

    // Rotating the slideShow. css('rotate') gives us the
    // current rotation in radians. We are converting it to
    // degrees so we can add +90 or -90.

    slideShow.animate({
     rotate:Math.round($.rotate.radToDeg(slideShow.css('rotate'))+degrees) + 'deg'
    },'slow').animate({
     width  : 490,
     height  : 490,
     marginTop : 10,
     marginLeft : 10
    },'fast');
   });
  });

  // By triggering the custom events below, we can
  // show the previous / next images in the slideshow.

  slideShow.bind('showNext',function(){
   slideShow.trigger('rotateContainer',['next',90]);
  });

  slideShow.bind('showPrevious',function(){
   slideShow.trigger('rotateContainer',['previous',-90]);
  });
 }

I am using jQuery’s $.support object to test whether the visitor’s browser supports CSS3 transformations. We are only going to display the rotation in browsers with transformation support, like the newer versions of Firefox, Chrome, Safari and Opera, while falling back to a plain fade in/out version of the slideshow in the rest.

Internet Explorer does provide a solution for rotating elements via its proprietary filter syntax, but it can’t handle the technique we are using for this slideshow. So, in effect, you are going to see a working slideshow in any browser, but only enjoy the fancy version in those that have support for it.

In the code above, you can see that we are binding a number of custom events. showNext and showPrevious are what we are using to control the slideshow. These in turn execute the rotateContainer event, and pass the direction and degrees as parameters (you could merge them into a single parameter, but I find it clearer this way).

script.js – Part 2

else{
  // Fallback for Internet Explorer and older browsers

  slideShow.bind('showNext',function(){
   $('li:first').fadeOut('slow',function(){
    $(this).remove().appendTo(ul).show();
    updateZindex();
   });
  });

  slideShow.bind('showPrevious',function(){
   var liLast = $('li:last').hide().remove().prependTo(ul);
   updateZindex();
   liLast.fadeIn('slow');
  });
 }

 // Listening for clicks on the arrows, and
 // triggering the appropriate event.

 $('#previousLink').click(function(){
  if(slideShow.is(':animated')){
   return false;
  }

  slideShow.trigger('showPrevious');
  return false;
 });

 $('#nextLink').click(function(){
  if(slideShow.is(':animated')){
   return false;
  }

  slideShow.trigger('showNext');
  return false;
 });

 // This function updates the z-index properties.
 function updateZindex(){

  // The CSS method can take a function as its second argument.
  // i is the zero-based index of the element.

  ul.find('li').css('z-index',function(i){
   return cnt-i;
  });
 }

});

In the second part of the code, you can see the fragment that is executed only in browsers that do not support CSS3 transformations. Notice that in this case, we also define the same showNext and showPrevious events, but here they just fade in / out the images, without starting a rotation.

The updateZindex() function is important, as otherwise the slides would be displayed in reverse order. This function loops through the elements in the order they currently are, and assigns a z-index property, so they are displayed correctly.

With this our Rotating Slideshow is complete!