This time I will share jQuery Plugin and tutorial about Versatile jQuery Slider Plugin – SudoSlider, hope it will help you in programming stack.
| File Size: | 2.26 MB |
|---|---|
| Views Total: | 6281 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
SudoSlider is a versatile jQuery slider Plugin that helps you create multiple functional sliders with built-in options and methods as you need.
Features:
- Auto width and height
- 134+ transition effects
- Callback support
- Multiple Sliders support
- Rich content support
- Ajax content support
- Touch enabled
- Keyboard navigation support
- Responsive design
- For more features, please check 45+ examples in the DEMO fold.
Basic Usage:
1. Include the latest jQuery library and SudoSlider.js on your web page
1 |
<script src="/path/to/cdn/jquery.min.js"></script> |
2 |
<script src="/path/to/js/jquery.sudoSlider.min.js"></script> |
2. Add slides to the slider.
1 |
<div id="slider" > |
2 |
<ul> |
3 |
<li><img src="1.jpg" alt="image description"/></li> |
4 |
<li><img src="2.jpg" alt="image description"/></li> |
5 |
<li><img src="3.jpg" alt="image description"/></li> |
6 |
<li><img src="4.jpg" alt="image description"/></li> |
7 |
<li><img src="5.jpg" alt="image description"/></li> |
8 |
</ul> |
9 |
</div> |
3. The necessary CSS styles.
01 |
#slider, #slider li { |
02 |
width:696px; |
03 |
overflow:hidden; |
04 |
} |
05 |
06 |
#slider img{ |
07 |
border:none; |
08 |
} |
09 |
10 |
#slider ul, #slider li{ |
11 |
position:relative; |
12 |
margin:0; |
13 |
padding:0; |
14 |
list-style:none; |
15 |
display:block; |
16 |
} |
5. Call the plugin with default options.
1 |
$(document).ready(function(){ |
2 |
var sudoSlider = $("#slider").sudoSlider(); |
3 |
}); |
6. Advanced usages.
01 |
// Returns the value of the option "effect". |
02 |
var fade = sudoSlider.getOption("effect"); |
03 |
04 |
// Set the option effect to fade |
05 |
sudoSlider.setOption("effect", "fade"); |
06 |
07 |
// Sets the effect to fade and enables touch |
08 |
sudoSlider.setOption({effect: "fade", touch: true}); |
09 |
10 |
// The content is inserted after the second slide. |
11 |
sudoSlider.insertSlide('<p>This is some content</p>', 2, 'Content 3'); |
12 |
13 |
// The second slide is removed. |
14 |
sudoSlider.removeSlide(2); |
15 |
16 |
// The slider animates to slide number 3 in 500 miliseconds. |
17 |
sudoSlider.goToSlide(3, 500); |
18 |
19 |
// Returns the jQuery object for the 2nd slide |
20 |
var slide = sudoSlider.getSlide(2); |
21 |
22 |
// User input is blocked (the controls) |
23 |
sudoSlider.block(); |
24 |
25 |
// User input is unblocked. |
26 |
sudoSlider.unblock(); |
27 |
28 |
// Starts a slideshow. |
29 |
sudoSlider.startAuto(); |
30 |
31 |
// Stops an automatic slideshow. |
32 |
sudoSlider.stopAuto(); |
33 |
34 |
// Adjusts the slider, if anything has been changed (like the image size). |
35 |
sudoSlider.adjust(); |
36 |
37 |
// The slider is destroyed. |
38 |
sudoSlider.destroy(); |
39 |
40 |
// Build it again. |
41 |
sudoSlider.init(); |
42 |
43 |
// Returns the current slide number (starts from 1). |
44 |
var currentSlide = sudoSlider.getValue('currentSlide'); |
45 |
46 |
// Returns the total number of slides. |
47 |
var totalSlides = sudoSlider.getValue('totalSlides'); |
48 |
49 |
// Returns if the slider is currently clickable (true/false). |
50 |
var clickable = sudoSlider.getValue('clickable'); |
51 |
52 |
// Returns if the slider is currently destroyed (true/false). |
53 |
var destroyed = sudoSlider.getValue('destroyed'); |
54 |
55 |
// Returns if the slider is currently running an automatic slideshow (true / false). |
56 |
var destroyed = sudoSlider.getValue('auto<a href="https://www.jqueryscript.net/animation/">Animation</a>'); |
57 |
58 |
// Alerts "Done" when the slider is not animating. Runs immidiatly if the slider is idle. |
59 |
sudoSlider.runWhenNotAnimating(function () {alert("Done");}); |
60 |
61 |
// Stop the current animation (if one is running). |
62 |
sudoSlider.stopAnimation(); |
7. All available options.
01 |
/* Check out the |
02 |
http://webbies.dk/SudoSlider/help/#Settings |
03 |
for full document. |
04 |
*/ |
05 |
06 |
effect: "slide", |
07 |
speed: 1500, |
08 |
customLink: FALSE, |
09 |
controlsFadeSpeed: 400, |
10 |
controlsFade: TRUE, |
11 |
insertAfter: TRUE, |
12 |
vertical: FALSE, |
13 |
slideCount: 1, |
14 |
moveCount: 1, |
15 |
startSlide: 1, |
16 |
responsive: TRUE, |
17 |
ease: SWING, |
18 |
auto: FALSE, |
19 |
pause: 2000, |
20 |
resumePause: FALSE, |
21 |
continuous: FALSE, |
22 |
prevNext: TRUE, |
23 |
numeric: FALSE, |
