Super Simple Fading Slideshow For jQuery - skippr

File Size: 2.02 MB
Views Total: 5453
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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=""></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>

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

$(document).ready(function() {
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. 

Change log:


  • fix duplicate timer issue


  • Fix.


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


  • Enabled arrow key navigation and hidden arrow functionality


  • Fixed nav-bar fast-click bug


  • Fixed double-click error


  • Added slide as default transition


  • styling fixes


  • ADD: autoplay functionality


  • 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.