This time I will share jQuery Plugin and tutorial about Auto Scalable Responsive Image Carousel Plugin For jQuery – skidder, hope it will help you in programming stack.
| File Size: | 43.2 KB |
|---|---|
| Views Total: | 19670 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
skidder is a jQuery slider plugin for creating a responsive, mobile-friendly image carousel that features auto image scaling to fit mobile & desktop browsers.
More features:
- Supports all modern browsers.
- Swipe to scroll.
- Auto resizes images with different heights.
- auto play, infinite looping, etc…
Basic Usage:
1. Include the jQuery skidder plugin’s CSS file in the header.
1 |
<link rel="stylesheet" href="src/jquery.skidder.css"> |
2. Include jQuery library and the jQuery skidder plugin’s javascript file at the end of the page.
1 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> |
2 |
<script src="src/jquery.skidder.js"></script> |
3. Include the other jQuery plugins for better experiences.
1 |
<script src="lib/imagesloaded.js"></script> |
2 |
<script src="lib/smartresize.js"></script> |
4. Wrap the images in the DIV elements.
1 |
<div class="slideshow" style="height: 0; overflow: hidden"> |
2 |
<div class="slide"><img src="./images/1000x400_b.png"></div> |
3 |
<div class="slide"><img src="./images/300x500_p.png"></div> |
4 |
<div class="slide"><img src="./images/500x300_y.png"></div> |
5 |
... |
6 |
</div> |
5. Call the plugin with all the default configs.
01 |
$('.slideshow').each( function() { |
02 |
var $slideshow = $(this); |
03 |
$slideshow.imagesLoaded( function() { |
04 |
$slideshow.skidder({ |
05 |
06 |
// Class of the slide element. |
07 |
slideClass: '.slide', |
08 |
imageClass: "", |
09 |
10 |
// 'animate' or 'css' |
11 |
animationType : 'css', |
12 |
13 |
// Scales widest image to maxSlideWidth. |
14 |
// Adjusts slideshow height accordingly. |
15 |
scaleSlides : true, |
16 |
17 |
// enable lazy load |
18 |
lazyLoad: false, |
19 |
lazyLoadAutoInit: true, |
20 |
lazyLoadWindow : 1, |
21 |
22 |
// Scales slides (via css) to uniform values, depending on maxWidth, maxHeight, and scaleTo settings |
23 |
scaleSlides : true, |
24 |
25 |
// Scale widest image to this width if scaleSlides == true |
26 |
maxWidth : 800, |
27 |
maxHeight: 500, |
28 |
29 |
// Defines the scaling mode of scaleSlides. |
30 |
// At the moments there are two modes: Scale to smallest, and ratio (responsive) mode. |
31 |
// "smallest" - height of the least tall image determines height of slideshow. |
32 |
// [x, y] – an array of two number defining a ratio for the slide show. |
33 |
scaleTo: "smallest", |
34 |
35 |
// Only for ratio mode: Determines wether images that are less wide than the current ratio will fill the viewport, having their top and bottom cropped ("false"), or fit the viewport, leaving room to the sides ("true"). |
36 |
preservePortrait: false, |
37 |
spaceSlides : false, |
38 |
noScaleClass : ".skidder-no-scale", |
39 |
40 |
// Creates a clickable and stylable paging dot for each slide. |
41 |
paging: true, |
42 |
pagingWrapper : ".skidder-pager", |
43 |
pagingElement : ".skidder-pager-dot", |
44 |
45 |
// Enable swiping on touch device. |
46 |
swiping : true, |
47 |
48 |
// Set to true if you don't want your slideshow centered. |
49 |
leftaligned : false, |
50 |
51 |
// Set to false if you don't want your slideshow to wrap around |
52 |
cycle : true, |
53 |
54 |
// In non-cycling mode jumpback will display a 'return to first slide' arrow at the last slide. |
55 |
jumpback : false, |
56 |
57 |
// Transition speed. |
58 |
speed : 400, |
59 |
60 |
// Enable autoplay |
61 |
autoplay : false, |
62 |
63 |
// Resume autoplay after paging has been clicked |
64 |
autoplayResume: false, |
65 |
66 |
// autoplay interval |
67 |
interval : 4000, |
68 |
69 |
// Choose between 'slide' or 'fade' |
70 |
transition: "slide", |
71 |
72 |
// Adds classes 'left-from-active' and 'right-from-active' to slides after transition is complete. |
73 |
// useful for triggering e.g css transitions on particular slide elements. |
74 |
// costs a little performance so leave inactive if not needed. |
75 |
directionClasses: false, |
76 |
77 |
// Callbacks |
78 |
afterSliding : function() {}, |
79 |
afterInit : function() {}, |
80 |
afterResize : function(instance) {}, |
81 |
afterLazyLoad : function() {} |
82 |
}); |
83 |
}); |
84 |
}); |
85 |
86 |
$(window).smartresize(function(){ |
87 |
$('.slideshow').skidder('resize'); |
88 |
}); |
Change logs:
2016-05-19
- v0.2.93: JS update
2015-12-17
- v0.2.9: lazy-loading; remove console log
2015-11-20
- v0.2.8: rewrite of CSS timing using transitionend and rAF
2015-05-05
- v0.2.2 final
2015-01-23
- Bugs fix.
2015-01-21
- Add autoplayResume funtion
2014-12-18
- Add callback function
2014-04-01
- fix touch link touch issue
This awesome jQuery plugin is developed by null2. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
