This time I will share jQuery Plugin and tutorial about One Element Slideshow Plugin with jQuery and HTML5 – hexSlide, hope it will help you in programming stack.
| File Size: | 18.9 KB |
|---|---|
| Views Total: | 781 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
hexSlide is a simple, fast jQuery plugin used to render a fully customizable image slider / slideshow from a single img tag using html5 data-* attribute.
How to use it:
1. Add jQuery library together with the jQuery hexSlide plugin’s JS and CSS to your web project.
1 |
<link href="hexslide.css" rel="stylesheet"> |
2 |
... |
3 |
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> |
4 |
<script src="hexslide.js"></script> |
2. Add a group of images separated by ‘|’ to an img tag using the data-slideshow-src attribute.
1 |
<img src="1.jpg" |
2 |
data-slideshow-src="1.jpg|2.jpg|3.jpg" |
3 |
> |
3. Initialize the slideshow by calling the function on the img tag.
1 |
$("img").hexSlide(); |
4. Customization options with default values.
01 |
// transition delay |
02 |
interval: 3000, |
03 |
04 |
// animation speed |
05 |
speed: 500, |
06 |
07 |
// randomize the order of the slides |
08 |
shuffle: false, |
09 |
10 |
// width / height of the slideshow |
11 |
width: false, |
12 |
height: false, |
13 |
14 |
// max / min width & height of the slideshow |
15 |
maxheight: false, |
16 |
maxwidth: false, |
17 |
minheight: false, |
18 |
minwidth: false, |
19 |
20 |
// pause on hover on autoplay mode |
21 |
pauseOnHover: true, |
22 |
23 |
// enable autoplay |
24 |
autoPlay: true, |
25 |
26 |
// enable navigation |
27 |
navigation: true, |
28 |
29 |
// false = show navigation / indicators on hover |
30 |
alwaysShowNav: false, |
31 |
alwaysShowIndicators: false, |
32 |
33 |
// stop autoplay on navigation open |
34 |
stopAutoOnNav: false, |
35 |
36 |
// show bullets pagination |
37 |
indicators: true, |
38 |
39 |
// enable animations |
40 |
animation: false, |
41 |
42 |
// additional CSS classes |
43 |
additionalClass: { |
44 |
slide: false, |
45 |
container: false |
46 |
}, |
47 |
additionalCSS: { |
48 |
slide: false, |
49 |
container: false, |
50 |
nextBtn: false, |
51 |
nextTxt: false, |
52 |
prevBtn: false, |
53 |
prevTxt: false |
54 |
}, |
55 |
56 |
// callback function |
57 |
callback: { |
58 |
start: function(){} |
59 |
}, |
60 |
61 |
// text for prev / next buttons |
62 |
text: { |
63 |
previous: "Back", |
64 |
next: "Next" |
65 |
} |
This awesome jQuery plugin is developed by hbomb79. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
