jQuery - Slideshow.js
Slideshow.js é um plugin jQuery para implementar de forma rápida e fácil a apresentação de slides de imagens ou vídeos em seu site.
Um exemplo simples de apresentação de slides, conforme mostrado abaixo -
<!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>Isso deve produzir o seguinte resultado -
Clique aqui