This time I will share jQuery Plugin and tutorial about Minimal Responsive Content Slider Plugin – jQuery SliderPlex, hope it will help you in programming stack.
| File Size: | 19.3 KB |
|---|---|
| Views Total: | 2306 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
SliderPlex is a simple, responsive jQuery content slider/carousel plugin that features auto rotation, pause on hover, navigation arrows, CSS3 animations and much more.
How to use it:
1. Make sure both the jQuery and jQuery SliderPlex plugin’s files are included.
1 |
<link rel="stylesheet" href="SliderPlex.min.css"> |
2 |
<script src="jquery.min.js"></script> |
3 |
<script src="SliderPlex.js"></script> |
2. Create an html list of html contents for the slider.
01 |
<div class="slider slider-plex"> |
02 |
<ul> |
03 |
<li> |
04 |
<img src="0.jpg"> |
05 |
</li> |
06 |
<li> |
07 |
<img src="1.jpg"> |
08 |
</li> |
09 |
<li> |
10 |
<img src="2.jpg"> |
11 |
</li> |
12 |
... |
13 |
</ul> |
14 |
</div> |
3. Initialize the responsive slider with default options.
1 |
$('.slider').SliderPlex(); |
4. Possible plugin options to customize the slider.
01 |
$('.slider').SliderPlex({ |
02 |
03 |
// in seconds |
04 |
interval: 8, |
05 |
06 |
// enable auto play |
07 |
autoPlay: true, |
08 |
09 |
// or 'slide', 'zoom' |
10 |
transition: 'fade', |
11 |
12 |
// in seconds |
13 |
transitionTime: .5, |
14 |
15 |
// false = left |
16 |
direction: 'right', |
17 |
18 |
// enables navigation arrows |
19 |
arrows: true, |
20 |
nonFocusArrows: false, |
21 |
22 |
// auto pause |
23 |
pauseOnMouseOver: false, |
24 |
pauseOnMouseDown: true, |
25 |
26 |
// fill container's space |
27 |
fillSpace: false |
28 |
|
29 |
}); |
This awesome jQuery plugin is developed by e200. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
