<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > ResponsiveSlides.js · Responsive jQuery slideshow< / title >
< meta name = "viewport" content = "width=device-width,initial-scale=1" >
< link rel = "stylesheet" href = "../responsiveslides.css" >
< link rel = "stylesheet" href = "demo.css" >
< script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" > < / script >
< script src = "../responsiveslides.min.js" > < / script >
< script >
// You can also use "$(window).load(function() {"
$(function () {
// Slideshow 1
$("#slider1").responsiveSlides({
maxwidth: 800,
speed: 800
});
// Slideshow 2
$("#slider2").responsiveSlides({
auto: false,
pager: true,
speed: 300,
maxwidth: 540
});
// Slideshow 3
$("#slider3").responsiveSlides({
auto: false,
pager: false,
nav: true,
speed: 500,
namespace: "callbacks",
before: function () {
$('.events').append("< li > before event fired.< / li > ");
},
after: function () {
$('.events').append("< li > after event fired.< / li > ");
}
});
// Slideshow 4
$("#slider4").responsiveSlides({
pager: '#slider4-pager'
});
});
< / script >
< / head >
< body >
< div id = "wrapper" >
< h1 > ResponsiveSlides.js< / h1 >
< h2 > Simple & lightweight responsive slideshow plugin (in 1kb)< / h2 >
<!-- Slideshow 1 -->
< ul class = "rslides" id = "slider1" >
< li > < img src = "1.jpg" alt = "" > < / li >
< li > < img src = "2.jpg" alt = "" > < / li >
< li > < img src = "3.jpg" alt = "" > < / li >
< / ul >
<!-- Slideshow 2 -->
< ul class = "rslides" id = "slider2" >
< li > < a href = "#" > < img src = "1.jpg" alt = "" > < / a > < / li >
< li > < a href = "#" > < img src = "2.jpg" alt = "" > < / a > < / li >
< li > < a href = "#" > < img src = "3.jpg" alt = "" > < / a > < / li >
< / ul >
<!-- Slideshow 3 -->
< ul class = "rslides" id = "slider4" >
< li > < img src = "1.jpg" alt = "" / > < / li >
< li > < img src = "2.jpg" alt = "" / > < / li >
< li > < img src = "3.jpg" alt = "" / > < / li >
< / ul >
< ul id = "slider4-pager" >
< li > < a href = "#" > < img src = "1_thumb.jpg" alt = "" / > < / a > < / li >
< li > < a href = "#" > < img src = "2_thumb.jpg" alt = "" / > < / a > < / li >
< li > < a href = "#" > < img src = "3_thumb.jpg" alt = "" / > < / a > < / li >
< / ul >
<!-- Slideshow 4 -->
< div class = "callbacks_container" >
< ul class = "rslides" id = "slider3" >
< li >
< img src = "1.jpg" alt = "" >
< p class = "caption" > This is a caption< / p >
< / li >
< li >
< img src = "2.jpg" alt = "" >
< p class = "caption" > This is another caption< / p >
< / li >
< li >
< img src = "3.jpg" alt = "" >
< p class = "caption" > The third caption< / p >
< / li >
< / ul >
< / div >
<!-- This is here just to demonstrate the callbacks -->
< ul class = "events" >
< li > < h3 > Example 4 callback events< / h3 > < / li >
< / ul >
< a href = "http://responsiveslides.com/" id = "download" > See the documentation< / a >
< p class = "footer" > ResponsiveSlides.js is created by < a href = "http://viljamis.com" > @viljamis< / a > . It's released under the MIT license. If you have any questions or feedback you can use the < a href = "https://github.com/viljami/ResponsiveSlides.js" > GitHub project page< / a > .< / p >
< / div >
< / body >
< / html >
