Super Simple Fading Slideshow For jQuery - skippr

skippr is a simple, lightweight and easy to use jQuery slideshow plugin with following features:

• Fully responsive.
• Auto resize and center the image on page resized.
• Bubble, block and arrow navigation.
• Cycle through slideshow DIVs with a cross-fade effect.
• Support any Html elements not only images.

How to use it:

1. Include the required CSS file in the head section of the document.

<link href="css/jquery.skippr.css" rel="stylesheet" type="text/css">

2. Include the jQuery library and jQuery skippr plugin's script at the bottom of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.skippr.js"></script>

3. Create content DIVs for the slideshow. Use background-image CSS property to specify the background images of the DIVs to create a background image slideshow.

<div id="wrapper">
<div style="background-image: url(img/1.jpg)"></div>
<div style="background-image: url(img/2.jpg)"></div>
<div style="background-image: url(img/3.jpg)"></div>
<div style="background-image: url(img/4.jpg)"></div>
<div style="background-image: url(img/5.jpg)"></div>
</div>

4. Call the plugin on the parent element and you're done.

<script>
$(document).ready(function() {
$("#random").skippr();
transition: 'slide', // specify the type of transition you want your slideshow to perform. Currently, Skippr accepts either 'fade' or 'slide'. 
speed: 1000, // time in milliseconds you want the transition between slides to take. 
easing: 'easeOutQuart', // easing property you want to use with slide transitions
navType: 'block', // what shape you want the navigation elements to be. Skippr currently takes either "block" or "bubble". 
childrenElementType : 'div', // children element type of the target element. Skippr now accepts either 'div' or 'img'. 
arrows: true, // whether or not to display navigation arrows. 
autoPlay: false, //  whether or not to use auto-playing functionality in the slideshow. 
autoPlayDuration: 5000, // time in milliseconds to display each slide when autoPlay is running. 
keyboardOnAlways: true, // whether to enable keyboard arrow keys to work at all times OR only when the skippr slidehow is being hovered over.
hidePrevious: false //  whether or not to hide previous arrow when first slide is showing. 
});
</script>

Change log:

2015-12-09

• fix duplicate timer issue

2014-08-13

• Fix.

2014-06-07

• Fixed bugs, solidified separate ecosystems for multiple instantiations of the skippr method.

2014-05-31

• Enabled arrow key navigation and hidden arrow functionality

2014-05-29

• Fixed nav-bar fast-click bug

2014-05-27

• Fixed double-click error

2014-05-21

• Added slide as default transition

2014-05-11

• styling fixes

2014-05-11

• ADD: autoplay functionality

2014-05-10

• ADD: arrow navigation functionality

---

This awesome jQuery plugin is developed by austenpayan. For more Advanced Usages, please check the demo page or visit the official website.