This time I will share jQuery Plugin and tutorial about Responsive Mobile Swiper/Carousel Plugin – jquery-slide.js, hope it will help you in programming stack.
| File Size: | 8 KB |
|---|---|
| Views Total: | 3447 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
The jquery-slide.js jQuery plugin lets you create a responsive, mobile-friendly slider/carousel/swiper with a lot of customization options.
Main features:
- Supports both mouse drag and touch swipe events.
- Automatically loops through elements at a given speed.
- 8 built-in transition effects.
- Easing options.
- Highly customizable pagination and navigation.
How to use it:
1. Insert the main JavaScript file jquery-slide.js after jQuery.
1 |
<script src="https://code.jquery.com/jquery-3.3.1.min.js" |
2 |
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" |
3 |
crossorigin="anonymous"> |
4 |
</script> |
5 |
<script src="jquery-slide.js"></script> |
2. Insert a group of items to the slider.
1 |
<div class="slide"> |
2 |
<div class="item item_1"></div> |
3 |
<div class="item item_2"></div> |
4 |
<div class="item item_3"></div> |
5 |
... |
6 |
</div> |
3. Initialize the plugin and done.
1 |
$(function() { |
2 |
$('.slide').slide(); |
3 |
}) |
4. Config the animation when transitioning between slides.
01 |
$('.slide').slide({ |
02 |
03 |
// random,up,down,left,right,opacity,zoomBig,zoomSmall |
04 |
actionIn:'random', |
05 |
06 |
// random,up,down,left,right,opacity,zoomBig,zoomSmall |
07 |
actionOut:'random', |
08 |
09 |
// animation speed: normal,fast,slow,(Number) |
10 |
speed:'normal', |
11 |
12 |
// easing |
13 |
easing:'linear', |
14 |
15 |
// transition delay |
16 |
delay:0, |
17 |
18 |
// stops auto-play on hover |
19 |
hoverStop:false |
20 |
21 |
}); |
5. Customize the pagination control.
01 |
$('.slide').slide({ |
02 |
03 |
page: true, // default: null |
04 |
pageDefault:{ |
05 |
// hor,ver |
06 |
direction:'hor', |
07 |
hover:true, |
08 |
no:true, |
09 |
borderWidth:0, |
10 |
borderColor:undefined, |
11 |
borderHover:undefined, |
12 |
bgcolor:undefined, |
13 |
bgcolorHover:undefined, |
14 |
color:undefined, |
15 |
colorHover:undefined, |
16 |
// rect,oval,rhomb |
17 |
shape:'rect', |
18 |
width:16, |
19 |
height:16, |
20 |
space:2, |
21 |
margin:'auto' |
22 |
}, |
23 |
24 |
}); |
6. Customize the navigation control.
01 |
$('.slide').slide({ |
02 |
03 |
flip: true, // default: null |
04 |
flipDefault:{ |
05 |
// lr,rl,tb,bt |
06 |
direction:'lr', |
07 |
next:undefined, |
08 |
prev:undefined, |
09 |
margin:'auto' |
10 |
} |
11 |
12 |
}); |
Changelog:
2018-06-07
- Fixed icons
2018-06-05
- Fixed for mobile
This awesome jQuery plugin is developed by wm123450405. For more Advanced Usages, please check the demo page or visit the official website.
source : jquery.net
