Super Simple jQuery Image Slider Plugin with jQuery and CSS3 - Slippry
File Size: | 391 KB |
---|---|
Views Total: | 9178 |
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
alt
attribute. - 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.
<link rel="stylesheet" href="slippry.css">
2. Add the following Html snippet to the body of your web page.
<ul id="demo"> <li><a href="#slide1"><img src="1.jpg" alt="Image Cation 1"></a></li> <li><a href="#slide2"><img src="2.jpg" alt="Image Cation 2"></a></li> <li><a href="#slide3"><img src="3.jpg" alt="Image Cation 3"></a></li> </ul>
3. Include jQuery library and jQuery Slippry plugin on your webpage.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script src="slippry.js"></script>
4. Initialize the slider with options.
<script> $(function() { $("#demo").slippry(); }); </script>
5. All the default settings.
// general elements & wrapper // wrapper to wrap everything, including pager slippryWrapper: '<div class="sy-box" />', // wrapper to wrap sildes & controls slideWrapper: '<div class="sy-slides-wrap" />', //additional wrapper around just the slides slideCrop: '<div class="sy-slides-crop" />', // class that goes to original element boxClass: 'sy-list', // elments cointaining slide content elements: 'li', // class for current slide activeClass: 'sy-active', // class for element that acts as intrinsic placholder fillerClass: 'sy-filler', loadingClass: 'sy-loading', // options // height of the sliders adapts to current slide adaptiveHeight: true, // num (starting from 1), random start: 1, // first -> last & last -> first arrows loop: true, // img, el [img takes caption from alt or title, el from title of slide element] captionsSrc: 'img', // Position: overlay, below, custom, false captions: 'overlay', // $ selector for captions wrapper captionsEl: '.sy-caption', // initialise even if there is only one slide initSingle: true, responsive: true, // visible, all | resources to wait for until showing slider preload: 'visible', // pager pager: true, pagerClass: 'sy-pager', // controls controls: true, controlClass: 'sy-controls', prevClass: 'sy-prev', prevText: 'Previous', nextClass: 'sy-next', nextText: 'Next', hideOnEnd: true, // transitions // fade, horizontal, vertical, kenburns, false transition: 'fade', // max zoom for kenburns (in %) kenZoom: 120, // spacing between slides (in %) slideMargin: 0, // [Class applied to [element] while a transition is taking place.] transClass: 'transition', // time the transition takes (ms) speed: 800, // easing to use in the animation [(see... [jquery www])] easing: 'swing', // seamless first/ last transistion, only works with loop continuous: true, // true, false -> fallback to js if no browser support useCSS: true, //slideshow auto: true, autoDirection: 'next', autoHover: true, autoHoverDelay: 100, autoDelay: 500, pause: 4000, // callback functions // when slider loaded onSliderLoad: function () { return this; }, // before page transition starts onSlideBefore: function () { return this; }, // after page transition happened onSlideAfter: function () { return this; }
Change logs:
v1.4.0 (2016-10-07)
- compaitble with new jQuery, removed Compass, small build refinements
v1.3.0 (2015-08-04)
- update.
v1.2.9 (2015-03-11)
- fixed responsive images without links
v1.2.8 (2015-03-10)
- path to img resources as option
2014-03-12
- Fix an IE8 bug.
2013-12-19
- added vertical translations, preload options
2013-12-16
- demo page update.
- fixed issue with Firefox KenBurns CSS animation problems.
2013-11-27
- added new custom spinner
- fixed issue with kenburns effect always running when using js for animations
This awesome jQuery plugin is developed by booncon. For more Advanced Usages, please check the demo page or visit the official website.