Skippr – A lighter, faster slideshow plugin for jQuery

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.

Skippr-A-jQuery-plugin-for-creating-tasteful-slideshows

Demo Download Skippr

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

        });
            

Divi WordPress Theme

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close