Super Simple Fading Slideshow Plugin For jQuery skippr - Download Super Simple Fading Slideshow For jQuery - skippr

Download Super Simple Fading Slideshow For jQuery – skippr

By Posted on

This time I will share jQuery Plugin and tutorial about Super Simple Fading Slideshow For jQuery – skippr, hope it will help you in programming stack.

Super Simple Fading Slideshow Plugin For jQuery skippr - Download Super Simple Fading Slideshow For jQuery - skippr
File Size: 2.02 MB
Views Total: 5164
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download



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.

view source
1 <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.

view source
1 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
2 <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.

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

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

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




source : jqueryscript.net

Related posts: