This time I will share jQuery Plugin and tutorial about Easy Cross-browser jQuery Slideshow Plugin – VMCSlider, hope it will help you in programming stack.
| File Size: | 11.6 KB |
|---|---|
| Views Total: | 6498 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
VMCSlider is a simple jQuery slideshow / image slider plugin which makes it easy to create awesome, customizable transition effects between images you wan to present.
Features:
- Dots / Arrows navigation.
- Works on any modern browsers and even IE 6/7/8.
- 20+ built-in animations.
- Autoplay.
- Fully responsive.
- Ascending and Descending modes.
- Infinite looping like a carousel or a rotator.
How to use it:
1. Load the primary CSS file in the head section of the web page.
1 |
<link href="src/style.css" rel="stylesheet"> |
2. Add a group of images into the web page.
01 |
<div id="slide"> |
02 |
<ul> |
03 |
<li data-text="Image Caption"><a href="javascript:;"><img src="demo1.jpg"/></a></li> |
04 |
<li><a href="javascript:;"><img src="demo2.jpg"/></a></li> |
05 |
<li><a href="javascript:;"><img src="demo3.jpg"/></a></li> |
06 |
<li><a href="javascript:;"><img src="demo4.jpg"/></a></li> |
07 |
<li><a href="javascript:;"><img src="demo5.jpg"/></a></li> |
08 |
<li><a href="javascript:;"><img src="demo6.jpg"/></a></li> |
09 |
</ul> |
10 |
</div> |
3. Load jQuery library and the jQuery VMCSlider plugin at the bottom of the web page.
1 |
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> |
2 |
<script src="src/vmc.slide.js"></script> |
3 |
<script src="src/vmc.slide.effects.js"></script> |
4. Initialize and setup the plugin as follow.
01 |
$('#slider').vmcSlider({ |
02 |
|
03 |
/* image data to load |
04 |
e.g. |
05 |
data: [ |
06 |
{ |
07 |
src: '1.jpg', |
08 |
text: 'Caption 1', |
09 |
href: '#', |
10 |
target: '_blank' |
11 |
}, |
12 |
... |
13 |
] |
14 |
*/ |
15 |
data: [], |
16 |
17 |
// width |
18 |
width: 'auto', |
19 |
20 |
// height |
21 |
height: 'auto', |
22 |
23 |
// image width |
24 |
// 0 = auto |
25 |
imgWidth: 0, |
26 |
27 |
// image height |
28 |
// 0 = auto |
29 |
imgHeight: 0, |
30 |
31 |
// min width |
32 |
minWidth: 0, |
33 |
34 |
// min height |
35 |
minHeight: 0, |
36 |
37 |
// <a href="https://www.jqueryscript.net/tags.php?/grid/">grid</a> options |
38 |
gridTdX: 10, |
39 |
gridTdY: 5, |
40 |
gridOdX: 30, |
41 |
gridOdY: 10, |
42 |
43 |
// shows navigation |
44 |
sideButton: true, |
45 |
46 |
// shows pagination |
47 |
navButton: true, |
48 |
49 |
// shows caption text |
50 |
showText: 'auto', |
51 |
52 |
// the caption contains html |
53 |
isHtml: false, |
54 |
55 |
// autoplay |
56 |
autoPlay: true, |
57 |
58 |
// ascending or descending |
59 |
ascending: true, |
60 |
61 |
// check out more effects in the vmc.slide.effects.js |
62 |
effects: ['fade'], |
63 |
64 |
// removes effects in IE6 |
65 |
ie6Tidy: false, |
66 |
67 |
// random effects |
68 |
random: true, |
69 |
70 |
// duration |
71 |
duration: 4000, |
72 |
73 |
// animation speed |
74 |
speed: 800, |
75 |
76 |
// pause on hover |
77 |
hoverStop: true, |
78 |
79 |
// flip callback |
80 |
flip: function (fromIndex, toIndex) { |
81 |
}, |
82 |
83 |
// created callback |
84 |
created: function () { |
85 |
}, |
86 |
87 |
}); |
Change log:
v2.0 (2018-03-20)
- Allows to dynamically load images from JS.
- Responsive design.
- Bugfix.
2015-12-31
- added callback events
This awesome jQuery plugin is developed by vomoc. For more Advanced Usages, please check the demo page or visit the official website.
source : jquery.net
