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