This time I will share jQuery Plugin and tutorial about Lightweight Automatic Image Rotator Plugin – zSlider.js, hope it will help you in programming stack.
| File Size: | 4.23 KB |
|---|---|
| Views Total: | 1995 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
zSlider.js is a tiny and easy-to-use jQuery image rotator plugin that slides (or fade) through an arbitrary number of images at a given speed.
Features:
- Custom transition interval.
- Supports both slide and fade animations.
- Hover over the navigation dots to switch images.
- Infinite looping.
How to use it:
1. Download and place the jQuery zSlider.js script after jQuery JavaScript library.
1 |
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> |
2 |
<script src="js/jQuery.zSlider.js"></script> |
2. Create a list of images and the wrap them into a container element.
01 |
<div id="image-rotator"> |
02 |
<ul> |
03 |
<li> |
04 |
<a href="#"><img src="1.jpg" alt=""></a> |
05 |
</li> |
06 |
<li> |
07 |
<a href="#"><img src="2.jpg" alt=""></a> |
08 |
</li> |
09 |
<li> |
10 |
<a href="#"><img src="3.jpg" alt=""></a> |
11 |
</li> |
12 |
</ul> |
13 |
</div> |
3. Call the zSlider method on the wrapping element.
1 |
$('#image-rotator').zSlider(); |
4. Apply the following CSS styles to the image rotator.
01 |
#image-rotator { |
02 |
position: relative; |
03 |
overflow: hidden; |
04 |
z-index: 888; |
05 |
} |
06 |
07 |
#image-rotator ul { |
08 |
list-style: none; |
09 |
position: absolute; |
10 |
left: 0; |
11 |
top: 0; |
12 |
} |
13 |
14 |
#image-rotator ul li { |
15 |
float: left; |
16 |
position: relative; |
17 |
} |
18 |
19 |
#image-rotator ul li img { |
20 |
width: 100%; |
21 |
height: 100%; |
22 |
} |
23 |
24 |
#image-rotator ol { |
25 |
position: absolute; |
26 |
bottom: 15px; |
27 |
right: 10px; |
28 |
list-style: none; |
29 |
z-index: 999; |
30 |
} |
31 |
32 |
#image-rotator ol li { |
33 |
width: 10px; |
34 |
height: 10px; |
35 |
float: left; |
36 |
margin: 5px; |
37 |
border-radius: 50%; |
38 |
cursor: pointer; |
39 |
background-color: #fff; |
40 |
} |
41 |
42 |
#image-rotator ol li.on { background: #FF5C1B; } |
5. Options and defaults.
01 |
$('#image-rotator').zSlider({ |
02 |
03 |
// interval time in ms |
04 |
interval: 4000, |
05 |
06 |
// 'a': horizontal sliding |
07 |
// 'b': vertical sliding |
08 |
// 'c': cross fading |
09 |
turnTo: "c", |
10 |
11 |
// shows pagiantion |
12 |
paper: true, |
13 |
14 |
// width and height of the rotator |
15 |
width:480, |
16 |
height:270 |
17 |
|
18 |
}); |
Change log:
2016-03-04
- JS improvement.
This awesome jQuery plugin is developed by yaxizhl. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
