Skippr is a new jQuery plugin that makes responsive slideshows very easy to use and implement on your web projects. It auto resizes and centers images when page is resized. You can have a bubble, block or arrow navigation. It cycles through slideshow Divs with a cross-fade effect and what’s more you are not restricted to use only images with it but HTML elements too.
Image may be NSFW.
Clik here to view.
Here are the steps that you need to follow so you can implement this nice responsive slideshow.
Step 1
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>
Step 2
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 style="background-image: url(img/image2.jpg)">
<div style="background-image: url(img/image3.jpg)">
<div style="background-image: url(img/image4.jpg)">
<div style="background-image: url(img/image5.jpg)">
</div>
</div>
Step 3
Just select the parent element with jQuery and call the skippr method. Thats it!
$(document).ready(function(){
$("#theTarget").skippr();
});
Some 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
});