You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
165 lines
7.4 KiB
165 lines
7.4 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>ResponsiveSlides.js · Responsive jQuery Slider & Slideshow</title> |
|
<meta name="author" content="Viljami S. Design"> |
|
<meta name="description" content="ResponsiveSlides.js is a tiny jQuery plugin that automatically creates responsive slider using images inside a container."> |
|
<meta name="viewport" content="width=device-width,initial-scale=1"> |
|
<link rel="stylesheet" href="responsiveslides.css"> |
|
<link rel="stylesheet" href="example.css"> |
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> |
|
<script src="responsiveslides.min.js"></script> |
|
<script> |
|
$(function () { |
|
|
|
// Slideshow 1 |
|
$(".rslides1").responsiveSlides({ |
|
speed: 1000, |
|
maxwidth: 800 |
|
}); |
|
|
|
// Slideshow 2 |
|
$(".rslides2").responsiveSlides({ |
|
auto: false, |
|
pager: true, |
|
speed: 500, |
|
maxwidth: 540 |
|
}); |
|
|
|
}); |
|
</script> |
|
</head> |
|
<body> |
|
<div id="wrapper"> |
|
<h1>ResponsiveSlides.js v1.55</h1> |
|
<h2>Simple & lightweight responsive slider plugin (in 1kb)</h2> |
|
<ul class="rslides rslides1"> |
|
<li><img src="1.jpg" alt=""></li> |
|
<li><img src="2.jpg" alt=""></li> |
|
<li><img src="3.jpg" alt=""></li> |
|
</ul> |
|
|
|
<p><a href="http://responsiveslides.com/">ResponsiveSlides.js</a> is a tiny jQuery plugin that creates a responsive slider using elements inside a container. It has been used on sites like <a href="http://www.buildwindows.com/launch" rel="external">Microsoft's Build 2012</a> and <a href="https://gridsetapp.com" rel="external">Gridset App</a>. ResponsiveSLides.js works with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for IE6 and other browsers that don't natively support it. Only dependency is <a href="http://jquery.com/" rel="external">jQuery</a> (1.6 and up supported) and that all the images are same size.</p> |
|
<p>Biggest difference to other responsive slider plugins is the file size (1.4kb minified and gzipped) + that this one doesn't try to do everything. Responsive Slides has basically only two different modes: Either it just automatically fades the images, or operates as a responsive image container with pagination and/or navigation to fade between slides.</p> |
|
<h3>Features</h3> |
|
<ul class="list"> |
|
<li>Fully responsive</li> |
|
<li>1kb minified and gzipped</li> |
|
<li>CSS3 transitions with JavaScript fallback</li> |
|
<li>Simple markup using unordered list</li> |
|
<li>Settings for transition and timeout durations</li> |
|
<li>Multiple slideshows supported</li> |
|
<li>Automatic and manual fade</li> |
|
<li>Works in all major desktop and mobile browsers</li> |
|
<li>Captions and other html-elements supported inside slides</li> |
|
<li>Separate pagination and next/prev controls</li> |
|
<li>Possibility to choose where the controls append to</li> |
|
<li>Possibility to randomize the order of the slides</li> |
|
<li>Possibility to use custom markup for pagination</li> |
|
<li>Can be paused while hovering slideshow and/or controls</li> |
|
<li>Images can be wrapped inside links</li> |
|
<li>Optional 'before' and 'after' callbacks</li> |
|
</ul> |
|
<br><br> |
|
<h3>Usage:</h3> |
|
<h4>1. Link files</h4> |
|
<pre><code><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> |
|
<script src="responsiveslides.min.js"></script></code></pre> |
|
<h4>2. Add Markup</h4> |
|
<pre><code><ul class="rslides"> |
|
<li><img src="1.jpg" alt=""></li> |
|
<li><img src="2.jpg" alt=""></li> |
|
<li><img src="3.jpg" alt=""></li> |
|
</ul></code></pre> |
|
<h4>3. Add CSS</h4> |
|
<pre><code>.rslides { |
|
position: relative; |
|
list-style: none; |
|
overflow: hidden; |
|
width: 100%; |
|
padding: 0; |
|
margin: 0; |
|
} |
|
|
|
.rslides li { |
|
-webkit-backface-visibility: hidden; |
|
position: absolute; |
|
display: none; |
|
width: 100%; |
|
left: 0; |
|
top: 0; |
|
} |
|
|
|
.rslides li:first-child { |
|
position: relative; |
|
display: block; |
|
float: left; |
|
} |
|
|
|
.rslides img { |
|
display: block; |
|
height: auto; |
|
float: left; |
|
width: 100%; |
|
border: 0; |
|
}</code></pre> |
|
<h4>4. Hook up the slideshow</h4> |
|
<pre><code><script> |
|
$(function() { |
|
$(".rslides").responsiveSlides(); |
|
}); |
|
</script></code></pre> |
|
<h4>5. Options you can customize</h4> |
|
<pre><code>$(".rslides").responsiveSlides({ |
|
auto: true, // Boolean: Animate automatically, true or false |
|
speed: 500, // Integer: Speed of the transition, in milliseconds |
|
timeout: 4000, // Integer: Time between slide transitions, in milliseconds |
|
pager: false, // Boolean: Show pager, true or false |
|
nav: false, // Boolean: Show navigation, true or false |
|
random: false, // Boolean: Randomize the order of the slides, true or false |
|
pause: false, // Boolean: Pause on hover, true or false |
|
pauseControls: true, // Boolean: Pause when hovering controls, true or false |
|
prevText: "Previous", // String: Text for the "previous" button |
|
nextText: "Next", // String: Text for the "next" button |
|
maxwidth: "", // Integer: Max-width of the slideshow, in pixels |
|
navContainer: "", // Selector: Where controls should be appended to, default is after the 'ul' |
|
manualControls: "", // Selector: Declare custom pager navigation |
|
namespace: "rslides", // String: Change the default namespace used |
|
before: function(){}, // Function: Before callback |
|
after: function(){} // Function: After callback |
|
});</code></pre> |
|
<p>That's all! Download the latest version, this demo and changelog from <a href="https://github.com/viljamis/ResponsiveSlides.js">Github</a>. For more examples about the usage <a href="http://responsiveslides.com/themes/themes.html">go here</a> or view <a href="http://responsiveslides.com/with-captions/themes.html">a demo with captions</a>.</p> |
|
<br><br><br><br> |
|
<h3>Example with options "auto:false" and "pager: true"</h3> |
|
<ul class="rslides rslides2"> |
|
<li><img src="1.jpg" alt=""></li> |
|
<li><img src="2.jpg" alt=""></li> |
|
<li><img src="3.jpg" alt=""></li> |
|
</ul> |
|
<br><br> |
|
<h3>ResponsiveSlides.js is tested with the following browser</h3> |
|
<ul class="list"> |
|
<li>Internet Explorer 6,7,8,9</li> |
|
<li>Firefox 3,6,8,11</li> |
|
<li>Safari 5,5.1</li> |
|
<li>Chrome 15,20</li> |
|
<li>Opera 11,11.6</li> |
|
<li>iOS Safari</li> |
|
<li>Symbian 3 Webkit</li> |
|
<li>Opera Mobile 10.1</li> |
|
<li>Opera Mini for iOS</li> |
|
<li>IE7, IE9 Mobile</li> |
|
<li>Firefox Mobile</li> |
|
<li>Android 2.3+</li> |
|
<li>Kindle browser</li> |
|
</ul> |
|
<br><br> |
|
<h3>Support</h3> |
|
<p>Please post your bug reports to <a href="https://github.com/viljamis/ResponsiveSlides.js/issues">GitHub issues</a>. For support requests, use <a href="http://stackoverflow.com">Stackoverflow</a>.</p> |
|
<a href="https://github.com/viljamis/ResponsiveSlides.js" id="download">Download the latest version from GitHub</a> |
|
<p class="footer">ResponsiveSlides.js is created by <a href="https://viljamisdesign.com">@viljamis</a>. Special thanks to <a href="https://github.com/bgutschke">Bastian Gutschke</a>.</p> |
|
</div> |
|
<a href="http://github.com/viljamis/ResponsiveSlides.js" class="github"><img style="position: absolute; top: 0; right: 0; border: 0;" src="forkme.png" alt="Fork me on GitHub"></a> |
|
</body> |
|
</html>
|
|
|