This time I will share jQuery Plugin and tutorial about ResponsiveSlides – Lightweight Responsive Slider Plugin, hope it will help you in programming stack.
| File Size: | 312 KB |
|---|---|
| Views Total: | 11351 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
ResponsiveSlides is a Simple & Lightweight Responsive Slider Plugin (1kb minified and gzipped) written in jQuery.
Features:
- Fully responsive
- 1kb minified and gzipped
- Simple markup using unordered list
- Settings for transition and timeout durations
- Multiple slideshows supported
- Automatic and manual fade
- Works in all major desktop and mobile browsers
- Captions and other html-elements supported inside slides
- Separate pagination and next/prev controls
- Possibility to choose where the controls append to
- Possibility to randomize the order of the slides
- Can be paused while hovering slideshow and/or controls
- Images can be wrapped inside links
- Optional ‘before’ and ‘after’ callbacks
How to Use:
1. Include jQuery Library and responsiveslides js
1 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> |
2 |
<script src="responsiveslides.min.js"></script> |
2. CSS
01 |
.rslides { |
02 |
position: relative; |
03 |
list-style: none; |
04 |
overflow: hidden; |
05 |
width: 100%; |
06 |
padding: 0; |
07 |
margin: 0; |
08 |
} |
09 |
10 |
.rslides li { |
11 |
position: absolute; |
12 |
display: none; |
13 |
width: 100%; |
14 |
left: 0; |
15 |
top: 0; |
16 |
} |
17 |
18 |
.rslides li:first-child { |
19 |
position: relative; |
20 |
display: block; |
21 |
float: left; |
22 |
} |
23 |
24 |
.rslides img { |
25 |
display: block; |
26 |
height: auto; |
27 |
float: left; |
28 |
width: 100%; |
29 |
border: 0; |
30 |
} |
3. Call the function with default options.
1 |
$(function () { |
2 |
$(".rslides").responsiveSlides(); |
3 |
}); |
4. The minimal markup.
1 |
<ul class="rslides"> |
2 |
<li><img src="1.jpg" alt="" /></li> |
3 |
<li><img src="2.jpg" alt="" /></li> |
4 |
<li><img src="3.jpg" alt="" /></li> |
5 |
</ul> |
5. Possible plugin options to customize the slider.
01 |
$(".rslides").responsiveSlides({ |
02 |
03 |
// Boolean: Animate automatically, true or false |
04 |
auto: true, |
05 |
06 |
// Integer: Speed of the transition, in milliseconds |
07 |
speed: 1000, |
08 |
09 |
// Integer: Time between slide transitions, in milliseconds |
10 |
timeout: 4000, |
11 |
12 |
// Boolean: Show pager, true or false |
13 |
pager: false, |
14 |
15 |
// Boolean: Show navigation, true or false |
16 |
nav: false, |
17 |
18 |
// Boolean: Randomize the order of the slides, true or false |
19 |
random: false, |
20 |
21 |
// Boolean: Pause on hover, true or false |
22 |
pause: false, |
23 |
24 |
// Boolean: Pause when hovering controls, true or false |
25 |
pauseControls: false, |
26 |
27 |
// String: Text for the "previous" button |
28 |
prevText: "Previous", |
29 |
30 |
// String: Text for the "next" button |
31 |
nextText: "Next", |
32 |
33 |
// Integer: Max-width of the slideshow, in pixels |
34 |
maxwidth: "", |
35 |
|
36 |
// Selector: Where auto generated controls should be appended to, default is after the <ul> |
37 |
"navContainer": "", |
38 |
39 |
// Selector: Where controls should be appended to, default is after the 'ul' |
40 |
manualControls: "", |
41 |
42 |
// String: change the default namespace used |
43 |
namespace: "rslides", |
44 |
45 |
// Function: Before callback |
46 |
before: function(){}, |
47 |
48 |
// Function: After callback |
49 |
after: function(){} |
50 |
51 |
}); |
Changelog:
v1.5.5 (2016-08-06)
- Add jQuery 3 support
This awesome jQuery plugin is developed by viljamis. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
