This time I will share jQuery Plugin and tutorial about Super Simple jQuery Image Slider Plugin with jQuery and CSS3 – Slippry, hope it will help you in programming stack.
| File Size: | 391 KB |
|---|---|
| Views Total: | 8441 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Slippry is a simple and easy-to-use jQuery plugin used to create a responsive and customizable image slider with plain simple Html and CSS3.
Features:
- Responsive. Automatically adapt to your viewport as window’s size changed.
- Allows to control the slides out of the slider.
- Displays the image captions using img
altattribute. - CSS3 transitons, transforms and easing effects supported.
- Slideshow mode supported.
- Auto play on load and auto loop supported.
- Dots or number navigation.
- Callback events supported.
Basic Usage:
1. Include required Slippry stylesheet file on your web page.
1 |
<link rel="stylesheet" href="slippry.css"> |
2. Add the following Html snippet to the body of your web page.
1 |
<ul id="demo"> |
2 |
<li><a href="#slide1"><img src="1.jpg" alt="Image Cation 1"></a></li> |
3 |
<li><a href="#slide2"><img src="2.jpg" alt="Image Cation 2"></a></li> |
4 |
<li><a href="#slide3"><img src="3.jpg" alt="Image Cation 3"></a></li> |
5 |
</ul> |
3. Include jQuery library and jQuery Slippry plugin on your webpage.
1 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> |
2 |
<script src="slippry.js"></script> |
4. Initialize the slider with options.
1 |
<script> |
2 |
$(function() { |
3 |
$("#demo").slippry(); |
4 |
}); |
5 |
</script> |
5. All the default settings.
001 |
// general elements & wrapper |
002 |
003 |
// wrapper to wrap everything, including pager |
004 |
slippryWrapper: '<div class="sy-box" />', |
005 |
006 |
// wrapper to wrap sildes & controls |
007 |
slideWrapper: '<div class="sy-slides-wrap" />', |
008 |
009 |
//additional wrapper around just the slides |
010 |
slideCrop: '<div class="sy-slides-crop" />', |
011 |
012 |
// class that goes to original element |
013 |
boxClass: 'sy-list', |
014 |
015 |
// elments cointaining slide content |
016 |
elements: 'li', |
017 |
018 |
// class for current slide |
019 |
activeClass: 'sy-active', |
020 |
021 |
// class for element that acts as intrinsic placholder |
022 |
fillerClass: 'sy-filler', |
023 |
loadingClass: 'sy-loading', |
024 |
025 |
// options |
026 |
027 |
// height of the sliders adapts to current slide |
028 |
adaptiveHeight: true, |
029 |
030 |
// num (starting from 1), random |
031 |
start: 1, |
032 |
033 |
// first -> last & last -> first arrows |
034 |
loop: true, |
035 |
036 |
// img, el [img takes caption from alt or title, el from title of slide element] |
037 |
captionsSrc: 'img', |
038 |
039 |
// Position: overlay, below, custom, false |
040 |
captions: 'overlay', |
041 |
042 |
// $ selector for captions wrapper |
043 |
captionsEl: '.sy-caption', |
044 |
045 |
// initialise even if there is only one slide |
046 |
initSingle: true, |
047 |
responsive: true, |
048 |
049 |
// visible, all | resources to wait for until showing slider |
050 |
preload: 'visible', |
051 |
052 |
// pager |
053 |
pager: true, |
054 |
pagerClass: 'sy-pager', |
055 |
056 |
// controls |
057 |
controls: true, |
058 |
controlClass: 'sy-controls', |
059 |
prevClass: 'sy-prev', |
060 |
prevText: 'Previous', |
061 |
nextClass: 'sy-next', |
062 |
nextText: 'Next', |
063 |
hideOnEnd: true, |
064 |
065 |
// transitions |
066 |
067 |
// fade, horizontal, vertical, kenburns, false |
068 |
transition: 'fade', |
069 |
070 |
// max zoom for kenburns (in %) |
071 |
ken<a href="https://www.jqueryscript.net/zoom/">Zoom</a>: 120, |
072 |
073 |
// spacing between slides (in %) |
074 |
slideMargin: 0, |
075 |
076 |
// [Class applied to [element] while a transition is taking place.] |
077 |
transClass: 'transition', |
078 |
079 |
// time the transition takes (ms) |
080 |
speed: 800, |
081 |
082 |
// easing to use in the animation [(see... [jquery www])] |
083 |
easing: 'swing', |
084 |
085 |
// seamless first/ last transistion, only works with loop |
086 |
continuous: true, |
087 |
088 |
// true, false -> fallback to js if no browser support |
089 |
useCSS: true, |
090 |
091 |
//slideshow |
092 |
auto: true, |
093 |
autoDirection: 'next', |
094 |
autoHover: true, |
095 |
autoHoverDelay: 100, |
096 |
autoDelay: 500, |
097 |
pause: 4000, |
098 |
099 |
// callback functions |
100 |
101 |
// when slider loaded |
102 |
on<a href="https://www.jqueryscript.net/slider/">Slider</a>Load: function () { |
103 |
return this; |
104 |
}, |
105 |
106 |
// before page transition starts |
