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 −

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns ="https://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"/&gt;&lt;link rel ="stylesheet" href ="theme/supersized.shutter.css" 
     type ="text/css" media ="screen"/&gt;&lt;script type ="text/javascript" 
     src ="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"&gt;&lt;/script&gt;&lt;script type ="text/javascript" src =" js/jquery.easing.min.js"&gt;&lt;/script&gt;&lt;script type ="text/javascript" src =" js/supersized.3.2.7.min.js"&gt;&lt;/script&gt;&lt;script type ="text/javascript" src ="theme/supersized.shutter.min.js"&gt;&lt;/script&gt;&lt;script type ="text/javascript"&gt;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 :'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg', 
                    title :'Sample demo', 
                    thumb :'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', 
                    url :'https://www.tutorialspoint.com'},{
                 image :'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg', 
                    title :'Sample demo', 
                    thumb :'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg', 
                    url :'https://www.tutorialspoint.com'},{
                 image :'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg', 
                    title :'Sample demo', 
                    thumb :'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg', 
                    url :'https://www.tutorialspoint.com'},{
                 image :'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg', 
                    title :'Sample demo', 
                    thumb :'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-2.jpg', 
                    url :'https://www.tutorialspoint.com'},{
                 image :'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg', 
                    title :'Sample demo', 
                    thumb :'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-3.jpg', 
                    url :'https://www.tutorialspoint.com'},],
           progress_bar      :1,			
           mouse_scrub       :0});});&lt;/script&gt;&lt;/head&gt;&lt;style type ="text/css"&gt;
  ul#demo-block{ margin:015px 15px 15px;}
  ul#demo-block li{ margin:0010px 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;}&lt;/style&gt;&lt;body&gt;&lt;div id ="prevthumb"&gt;&lt;/div&gt;&lt;div id ="nextthumb"&gt;&lt;/div&gt;&lt;a id ="prevslide"class="load-item"&gt;&lt;/a&gt;&lt;a id ="nextslide"class="load-item"&gt;&lt;/a&gt;&lt;div id ="thumb-tray"class="load-item"&gt;&lt;div id ="thumb-back"&gt;&lt;/div&gt;&lt;div id ="thumb-forward"&gt;&lt;/div&gt;&lt;/div&gt;&lt;div id ="progress-back"class="load-item"&gt;&lt;div id ="progress-bar"&gt;&lt;/div&gt;&lt;/div&gt;&lt;div id ="controls-wrapper"class="load-item"&gt;&lt;div id ="controls"&gt;&lt;a id ="play-button"&gt;&lt;img id ="pauseplay" src ="img/pause.png"/&gt;&lt;/a&gt;&lt;div id ="slidecounter"&gt;&lt;span class="slidenumber"&gt;&lt;/span&gt;/&lt;span class="totalslides"&gt;&lt;/span&gt;&lt;/div&gt;&lt;div id ="slidecaption"&gt;&lt;/div&gt;&lt;a id ="tray-button"&gt;&lt;img id ="tray-arrow" src ="img/button-tray-up.png"/&gt;&lt;/a&gt;&lt;ul id ="slide-list"&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *