JS Tutorial
- Overview
- Documents
- Demos
Slippry is a responsive slider plugin for jQuery. Intrinsic trick to enable responsive resizing without js!
- Responsive
- Modern : HTML5 + CSS3 + jQuery
- Simple
Source: slippry.com
1. INCLUDE CSS AND JS FILES
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="/js/slippry.min.js"></script> <link rel="stylesheet" href="/css/slippry.css" />
2. HTML
<ul id="slippry-demo">
<li>
<a href="#slide1"><img src="assets/img/slippry-01.jpg" alt="Welcome to Slippry!"></a>
</li>
<li>
<a href="#slide2"><img src="assets/img/slippry-02.jpg" alt="This is an awesome jQuery slider plugin."></a>
</li>
<li>
<a href="#slide3"><img src="assets/img/slippry-03.jpg" alt="Check it out, you are going to <span class='red'>♥</span> it :)"></a>
</li>
</ul>
3. JAVASCRIPT
jQuery(document).ready(function(){
jQuery('selector').slippry()
});
4. OPTIONS
general elements & wrapper
slippryWrapper : Markup to be used for the entire slider (including the pager).
default: '<div class="sy-box" />' accepts: Any valid HTML element (almost) can be used, but we recommend <div>, <section>.
slideWrapper : Markup to be used to wrap the slides and controls (think of it as the viewport)
default: '<div class="sy-slides-wrap" />' accepts: Any valid HTML element (almost) can be used, but we recommend <div>, <section>.
slideCrop : Markup to be used to wrap just the slides.
default: <div class="sy-slides-crop" /> accepts: Any valid HTML element (almost) can be used, but we recommend <div>, <section>.
boxClass : The class that is applied to the original slide parent element (e.g. the <ul> element).
default: 'sy-list' accepts: Any string that is valid as a class in CSS.
elements : HTML element used for each slide.
default: 'li' accepts: Any HTML element that is styled as a block element. We recommend <li>, <div>, <article> or <section>.
activeClass : The class applied to the current (visible) slide.
default: 'sy-active' accepts: Any string that is valid as a class in CSS.
fillerClass : The class for the element that acts as an intrinsic placeholder (basically the element which makes sure the slider is sized correctly).
default: 'sy-filler' accepts: Any string that is valid as a class in CSS.
loadingClass : The class applied to `slippry_wrapper` while Slippry slider is being loaded.
default: 'sy-loading' accepts: Any string that is valid as a class in CSS.
options
adaptiveHeight : The slider height should change on the fly according to the current slide.
default: true accepts: true, false
start : The slide number that should be displayed first.
default: 1 accepts: integer (1 = first slide), random
loop : Whether the slider should loop (i.e. the first slide goes to the last, the last slide goes to the first).
default: true accepts: true, false
captionsSrc : Specifies the source of the captions. When img, captions will be taken from the title or alt attributes, when any other element it will be taken from thetitle attribute.
default: 'img' accepts: 'img' or any element.
captions : Specifies the position of captions or no captions at all. *Custom allows you to specify the class of an element in which to insert the captions.
default: 'overlay' accepts: 'overlay', 'below', 'custom', false
captionsEl : The element for the captions. Note, this can be a box outside of .slippry_box.
default: '.sy-caption' accepts: Any jQuery selector.
initSingle : Whether the slider should initialise even if there is only one slide element.
default: true accepts: true, false
responsive : Whether the slider should be responsive.
default: true accepts: true, false
preload : Elements that are preloaded before slider shows.
default: 'visible' accepts: 'visible', 'all'
pager
pager : Whether the slider should have a pager.
default: true accepts: true, false
pagerClass : The class given to the slider container.
default: 'sy-pager' accepts: Any string that is valid as a class in CSS.
controls
controls : Whether the slider should have controls (next, previous arrows).
default: true accepts: true, false
controlClass : The class for the controls container.
default: 'sy-controls' accepts: Any string that is valid as a class in CSS.
prevClass : The class for the anchor tag to go to the previous slide (left).
default: 'sy-prev' accepts: Any string that is valid as a class in CSS.
prevText : The text for the previous slide control (important for screen readers).
default: 'Previous' accepts: Any text string.
nextClass : The class for the anchor tag to go to the previous slide (right).
default: 'sy-next' accepts: Any string that is valid as a class in CSS.
nextText : The text for the next slide control (important for screen readers).
default: 'Next' accepts: Any text string.
hideOnEnd : Hide the previous or next control when it reaches the first or last slide respectively.
default: true accepts: true, false
transitions
transition : Transition type to use, or no transitions.
default: 'fade' accepts: 'fade', 'horizontal', 'vertical', 'kenburns', false
kenZoom : Max zoom level use for the Ken Burns transition.
default: 120 accepts: any percentage value.
slideMargin : The spacing between slides.
default: 0 accepts: any value as a percentage of the slippry_box (viewport).
transClass : The class applied to the slide element when a transition is in progress.
default: 'transition' accepts: Any string that is valid as a class in CSS.
speed : The time the transition takes to complete.
default: 800 accepts: any number (in milliseconds).
easing : The easing effect to use for the selected transition.
default: 'swing' accepts: any easing effect. See "http://jqueryui.com/resources/demos/effect/easing.html".
continuous : Whether the slider should run continuously (seamless transition between the first and last slides).
default: true accepts: true, false
useCSS : Whether the slider should use CSS transitions. If the user's browser doesn't support CSS transitions the slider will fallback to jQuery.
default: false accepts: true, false
slideshow
auto : Whether the slider should run automatically on load.
default: true accepts: true, false
autoDirection : Which direction the slider should move in if in auto mode.
default: 'next' accepts: 'next', 'prev'
autoHover : Whether the slideshow should pause automatically on hover.
default: true accepts: true, false
autoHoverDelay : The delay (if any) before the slider resumes automatically after hover.
default: 100 accepts: any number (in milliseconds).
autoDelay : The delay (if any) before the slider runs automatically on load.
default: 500 accepts: any number (in milliseconds).
pause : The time a slide lasts.
default: 3000 accepts: any number (in milliseconds).
5. CALLBACK FUNCTIONS
onSliderLoad : Runs when the slider has loaded.
default: function (index) {
return this;
},
accepts: any valid function.
onSlideBefore : Runs before the slide transition starts.
default: function (slide, old_index, new_index) {
return this;
},
accepts: any valid function.
onSlideAfter : Runs after the slide transition has completed.
default: function (slide, old_index, new_index) {
return this;
}
accepts: any valid function.
6. PUBLIC FUNCTIONS
getCurrentSlide : Returns the jQuery object of the current slide;
el.getCurrentSlide();
getSlideCount : Returns the number of slides;
el.getSlideCount();
goToSlide : Goes to #slide.
el.goToSlide(slide);
goToNextSlide : Goes to next slide.
el.goToNextSlide();
goToPrevSlide : Goes to previous slide.
el.goToPrevSlide();
startAuto : Starts the automatic slide changes.
el.startAuto();
stopAuto : Stops the automatic slide changes.
el.stopAuto();
refresh : Re-initialises the already initialised slider.
Useful when adding slides dynamically.
el.refresh();
destroySlider : Destroys the Slippry slider and puts the original markup back.
el.destroySlider();
reloadSlider : Destroys the Slippry slider and initialises it again.
el.reloadSlider();
