jQuery - Slideshow.js

Slideshow.js is a jQuery plugin for quickly and easily implementing slide show of images or videos into your website.

A Simple of slide show example as shown below

<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">

 

   <head>

      <meta http-equiv = "content-type" content = "text/html; charset = UTF-8" />                   

      <link rel = "stylesheet" href = "css/supersized.css"

         type = "text/css" media = "screen" />

      <link rel = "stylesheet" href = "theme/supersized.shutter.css"

         type = "text/css" media = "screen" />

                       

      <script type = "text/javascript"

         src = "https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

      <script type = "text/javascript" src = "js/jquery.easing.min.js"></script>               

      <script type = "text/javascript" src = "js/supersized.3.2.7.min.js"></script>

      <script type = "text/javascript" src = "theme/supersized.shutter.min.js"></script>

                       

      <script type = "text/javascript">                             

         jQuery(function($){

                                   

            $.supersized({

               slideshow        :  1,                            

               autoplay                :  1,                                  

               start_slide      :  1,                             

               stop_loop        :  0,                            

               random           :  0,                            

               slide_interval   :  3000,                      

               transition       :  6,                             

               transition_speed :  1000,                  

               new_window       :  1,                        

               pause_hover      :  0,                          

               keyboard_nav     :  1,                         

               performance      :  1,                          

               image_protect    :  1,                                                                              

               min_width        :  0,                          

               min_height       :  0,                          

               vertical_center  :  1,                           

               horizontal_center:  1,                        

               fit_always       :  0,                             

               fit_portrait     :  1,                              

               fit_landscape    :  0,                           

               slide_links      :  'blank',        

               thumb_links      :  1,                         

               thumbnail_navigation:   0,                            

               slides :           [{image : '

                  http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/sli

                     des/kazvan-1.jpg',

                                                                        

                  title  : 'Sample demo', thumb :

                  http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thu

                     mbs/kazvan-1.jpg',

                  url : 'http://www.tutorialspoint.com'},

                                                                        

                  {image : '

                  http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/sli

                     des/kazvan-3.jpg',

                                                                        

                  title  : 'Sample demo', thumb : '

                  http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/

                     thumbs/kazvan-3.jpg',

                  url : 'http://www.tutorialspoint.com'},

                                                                        

                  {image : '

                  http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/

                     slides/wojno-1.jpg',

                                                                        

                  title  : 'Sample demo', thumb : '

                  http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/

                     thumbs/wojno-1.jpg',

                  url : 'http://www.tutorialspoint.com'},

                                                                        

                  {image : '

                  http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/

                     slides/wojno-2.jpg',

                                                                        

                  title  : 'Sample demo', thumb : '

                  http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/

                     thumbs/wojno-2.jpg',

                  url : 'http://www.tutorialspoint.com'},

                                                                        

                  {image : '

                  http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/

                     slides/wojno-3.jpg',

                                                                        

                  title  : 'Sample demo', thumb : '

                  http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/

                     thumbs/wojno-3.jpg', url : 'http://www.tutorialspoint.com'},

               ],

                                                            

               progress_bar  :  1,                             

               mouse_scrub   :  0    

                                                            

            });

         });               

      </script>   

   </head>

           

   <style type = "text/css">

      ul#demo-block{ margin:0 15px 15px 15px; }

      ul#demo-block li{ margin:0 0 10px 0; padding:10px; display:inline; float:left;

      clear:both; color:#aaa; background:url('img/bg-black.png');

         font:11px Helvetica, Arial, sans-serif; }

      ul#demo-block li a{ color:#eee; font-weight:bold; }

   </style>

                       

   <body>

                       

      <div id = "prevthumb"></div>

      <div id = "nextthumb"></div>

                                    

      <a id = "prevslide" class = "load-item"></a>

      <a id = "nextslide" class = "load-item"></a>

                                    

      <div id = "thumb-tray" class = "load-item">

         <div id = "thumb-back"></div>

         <div id = "thumb-forward"></div>

      </div>

                                    

      <div id = "progress-back" class = "load-item">

         <div id = "progress-bar"></div>

      </div>

                                    

      <div id = "controls-wrapper" class = "load-item">

                                    

         <div id = "controls">

                                    

            <a id = "play-button"><img id = "pauseplay"

               src = "img/pause.png"/></a>

                                                            

            <div id = "slidecounter">

               <span class = "slidenumber"></span> / <

                  span class = "totalslides"></span>

            </div>

                                                            

            <div id = "slidecaption"></div>

               <a id = "tray-button"><img id = "tray-arrow"

                  src = "img/button-tray-up.png"/></a>

               <ul id = "slide-list"></ul>

            </div>

                                                

         </div>

                                    

      </div>

                       

   </body>

           

</html>