This time I will share jQuery Plugin and tutorial about Easy Touchable jQuery Image Slider Plugin – Kiss Slider, hope it will help you in programming stack.
| File Size: | 10.1 KB |
|---|---|
| Views Total: | 1260 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Kiss Slider is a simple, flexible, cross-platform jQuery slider/slideshow plugin for presenting your images in an elegant way.
Features:
- Fast, smooth slide animations.
- Auto scroll.
- Numeric pagination.
- Responsive design and touch enabled.
- Custom easing effects.
- Minimal html markup requirement.
How to use it:
1. First of all, add jQuery and jQuery Kiss Slider plugin’s script into your webpage.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="jquery.kiss-slider.js"></script> |
2. Create a list of images for the slider.
1 |
<ul class="kiss-slider"> |
2 |
<li><img src="1.jpg" /></li> |
3 |
<li><img src="2.jpg" /></li> |
4 |
<li><img src="3.jpg" /></li> |
5 |
... |
6 |
</ul> |
3. Add the pagination and navigation buttons to the slider.
1 |
<ul class="kiss-pagination"> |
2 |
</ul> |
3 |
<button type="button" class="previous">← previous</button> |
4 |
<button type="button" class="next">next →</button> |
4. Initialize the slider and done.
1 |
$('.kiss-slider').kissSlider({ |
2 |
prevSelector: '.previous', |
3 |
nextSelector: '.next', |
4 |
paginationSelector: '.kiss-pagination', |
5 |
}); |
5. All default plugin settings.
01 |
$('.kiss-slider').kissSlider({ |
02 |
03 |
// Selector for the slides. |
04 |
// If null, get the direct children |
05 |
slideSelector: null, |
06 |
07 |
// Selector for the next button. |
08 |
nextSelector: null, |
09 |
10 |
// Selector for the previous button. |
11 |
prevSelector: null, |
12 |
13 |
// Selector for the pagination |
14 |
paginationSelector: null, |
15 |
16 |
// What to display before each pagination link. |
17 |
paginationBefore: '', // '<li>' |
18 |
19 |
// What to display after each pagination link. |
20 |
paginationAfter: '', // '</li>' |
21 |
22 |
// Classname for the current pagination link |
23 |
paginationCurrentClass: 'current', |
24 |
25 |
// 0-based index of the slide to display first |
26 |
startIndex: 0, |
27 |
28 |
// z-index for the slides. |
29 |
// Usefull if the slider have to display on top of other things |
30 |
startingZ: 1, |
31 |
32 |
// Duration of the sliding animation |
33 |
slideDuration: 400, |
34 |
35 |
// Easing for the sliding animation. |
36 |
easing: 'swing', |
37 |
38 |
// Autoscroll delay |
39 |
autoscrollDelay: 0, |
40 |
41 |
// Do not animate the slider |
42 |
noAnim: false, |
43 |
44 |
// Do not disable autoscroll when mouse is over the slideshow |
45 |
alwaysAutoscroll: false, |
46 |
47 |
// callback parameters : oldIndex, newIndex. |
48 |
beforeSlide: null, |
49 |
50 |
// callback parameters : oldIndex, newIndex. |
51 |
afterSlide: null, |
52 |
53 |
// calls when the slider is ready |
54 |
init: null, |
55 |
56 |
// Allow swipe on touch-enabled devices |
57 |
allowSwipe: true |
58 |
|
59 |
}); |
6. Public methods.
01 |
// goto next slide |
02 |
$('.kiss-slider').kissSlider('next'); |
03 |
04 |
// back to previous slide |
05 |
$('.kiss-slider').kissSlider('previous'); |
06 |
07 |
// move to slide 3 |
08 |
$('.kiss-slider').kissSlider('moveTo', {index:2}); |
09 |
10 |
// Start autmatic scrolling of slides. |
11 |
$('.kiss-slider').kissSlider('startAuto<a href="https://www.jqueryscript.net/tags.php?/Scroll/">Scroll</a>', 1000); |
12 |
13 |
// Stop automatic scrolling of slides. |
14 |
$('.kiss-slider').kissSlider('stopAutoScroll'); |
15 |
16 |
// Visually up<a href="https://www.jqueryscript.net/time-clock/">date</a>s slider. Call it after you alter the DOM inside the slider. |
17 |
$('.kiss-slider').kissSlider('refresh'); |
18 |
19 |
// Removes all slides from DOM, except for the current one, and internally updates currentIndex. Does not call refresh(). |
20 |
$('.kiss-slider').kissSlider('clean'); |
Change log:
2016-05-12
- added more methods.
2016-05-04
- added startAutoScroll and stopAutoScroll actions
This awesome jQuery plugin is developed by VivienLN. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
