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" /> <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 : '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 }); }); </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> </body> </html>
Leave a Reply