- Overview
- Documents
Skippr is a super simple lighter and faster slideshow plugin for jQuery.
Source: iamapioneer.com
1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" href="css/jquery.skippr.css"> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="js/jquery.skippr.js"></script>
2. HTML
<div id="container"> <div id="theTarget"> <div style="background-image: url(img/image1.jpg)"></div> <div style="background-image: url(img/image2.jpg)"></div> <div style="background-image: url(img/image3.jpg)"></div> <div style="background-image: url(img/image4.jpg)"></div> <div style="background-image: url(img/image5.jpg)"></div> </div> </div>
3. JAVASCRIPT
$(document).ready(function(){ $("#theTarget").skippr(); });
4. OPTIONS
// Defaults $("#theTarget").skippr({ transition: 'slide', speed: 1000, easing: 'easeOutQuart', navType: 'block', childrenElementType: 'div', arrows: true, autoPlay: false, autoPlayDuration: 5000 });
transition : specify the type of transition you want your slideshow to perform. Currently, Skippr accepts either 'fade' or 'slide'. The Slide transitions are acccelerated using velocity.js by Julian Shapiro.
speed : enter length of time in milliseconds you want the transition between slides to take. Default is 500.
easing : enter the camelCase name of the easing property you want to use with slide transitions. All jquery UI easing properties are accepted. Default is 'easeOutQuart'.
navType : enter a string of what shape you want the navigation elements to be. Skippr currently takes either "block" or "bubble". Default is "block".
childrenElementType : choose the children element type of the target element. Skippr now accepts either 'div' or 'img'. Default is 'div'.
arrows : boolean value determining whether or not to display navigation arrows. Default is true. Set to false to hide arrows.
autoPlay : boolean value determining whether or not to use auto-playing functionality in the slideshow. Default is false. Set to true to activate auto-play.
autoPlayDuration : sets the amount of time in milliseconds to display each slide when autoPlay is running. Default is 5000 milliseconds.