Simple Slideshow with CSS3 and Jquery - Simple Projects with Source Code

Making Slideshow With Css and Jquery it easy and not as difficult as imagined, in this tutorial we will discuss briefly how to make it.

A slide show is a presentation of a series of still images on the projection screen or electronic display, usually in a prearranged sequence. Each image is usually displayed at least a few seconds, and sometimes for several minutes, before being replaced by the next image.

There are two models that we will create slideshow here:

Opacity Slideshow (process of changing the image slowly disappearing and changing).
Flip Slideshow (process of changing shifts laterally).

Opacity Slideshow

Opacity slideshow will show the effect of change of the image that is slowly disappearing and being replaced with a new image, it can be made by using the opacity set with css.

HTML structure


        Opacity Slideshow
        
            
            
            
            
        
   
        
            Pic 1
            Pic 2
            Pic 3
            Pic 4

CSS Code :
div # twd_opa used to hold the image, while p # twd_opa_controls used to determine the button that can be clicked in order to change the image.

/* CSS DEMO 1 */
    p#twd_opa_controls {
      text-align:center;
    }
    #twd_opa_controls span {
      padding-right:2em;
      cursor:pointer;
    }
    #twd_opa {
      position:relative;
      height:429px;
      width:600px;
      margin:0 auto 10px;
    }
    #twd_opa img {
      position:absolute;
      left:0;
      -webkit-transition: opacity 1s ease-in-out;
      -moz-transition: opacity 1s ease-in-out;
      -o-transition: opacity 1s ease-in-out;
      transition: opacity 1s ease-in-out;
      opacity:0;
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
    }
   
    #twd_opa img.opaque {
      opacity:1;
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      filter: alpha(opacity=1);
    }

Javascript/Jquery code :

/* Js DEMO 1 | Opacity Slideshow*/
    $(document).ready(function() {
      $("#twd_opa_controls").on('click', 'span', function() {
        $("#twd_opa img").removeClass("opaque");
   
        var newImage = $(this).index();
   
        $("#twd_opa img").eq(newImage).addClass("opaque");
   
        $("#twd_opa_controls span").removeClass("selected");
        $(this).addClass("selected");
      });
    });

Flip Slideshow

Flip slideshow will show the effect of change of the image in a way shifted laterally.

HTML structure :


      Flip Slideshow
      
        
          
          
          
          
        
      
   
      
        Pic 1
        Pic 2
        Pic 3
        Pic 4

CSS :

/* CSS DEMO 2 */
    p#slide_flip_controls {
      text-align:center;
    }
    #slide_flip_controls span {
      padding-right:2em;
      cursor:pointer;
    }
   
    #slide_flip_container {
      height:429px;
      width:600px;
      overflow:hidden;
      margin:0 auto 10px;
    }
    #slide_flip_images {
      /* wide reservoir. because there are 4 images measuring 600, so 4 * 600 = 2400. * / width: 2400px;
   
      -webkit-transition:all 1.0s ease-in-out;
      -moz-transition:all 1.0s ease-in-out;
      -o-transition:all 1.0s ease-in-out;
      transition:all 1.0s ease-in-out;
    }
    #slide_flip_images img {
      padding:0;
      margin:0;
      float:left; /*bolted image float left so that each image is below the previous image. */
    }

Javascript/Jquery code :

/* Js DEMO 2 : Flip Slideshow */
    $(document).ready(function() {
      $('#slide_flip_controls').on('click', 'span', function(){
        $("#slide_flip_images").css("transform","translateX("+$(this).index() * -600+"px)");
        $("#slide_flip_controls span").removeClass("selected");
        $(this).addClass("selected");
      });
    });