The setup.
Include jquery.skippr.css inside your head tag and jquery.skippr.js just before the closing body tag.
Be sure to include jQuery before jquery.skippr.js
<head>
<title>Your Awesome Website</title>
<link rel=”stylesheet” href=”css/jquery.skippr.css”>
</head>
<body>
<script src=”//code.jquery.com/jquery-1.11.0.min.js”></script>
<script src=”js/jquery.skippr.js”></script>
</body>
Create a target element with divs inside, one for each slide, and add a background image with css or the style attribute. Skippr targets div tags inside of the selected element with background-images applied to them. Put this target element inside of a container element styled and positioned to your liking. The target element will completely fill it’s parent container element.
**Note: The container element must have a specified width and height, and position other than static to work properly.
<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>
Initiate.
Just select the target element with jQuery and call the skippr method. Thats it!
$(document).ready(function(){
$(“#theTarget”).skippr();
});
Options.
Pass in an options object as a parameter to the skippr method for customization.
// Defaults
$(“#theTarget”).skippr({
transition: ‘slide’,
speed: 1000,
easing: ‘easeOutQuart’,
navType: ‘block’,
childrenElementType: ‘div’,
arrows: true,
autoPlay: false,
autoPlayDuration: 5000,
keyboardOnAlways: true,
hidePrevious: false
});
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.
keyboardOnAlways new : boolean value determining whether to enable keyboard arrow keys to work at all times OR only when the skippr slidehow is being hovered over. Default is “true”.
hidePrevious new : boolean value determining whether or not to hide previous arrow when first slide is showing. Default is “false”.