article:
JS Plugin & Code: SlidesJS
article:
UI: Web Green UI Kit (PSD)

JS Plugin & Code: Unslider.js

Advertisement

Unslider - the super-tiny jQuery slider.

Unslider’s been tested in all the latest browsers, and it falls back magnificently for the not-so-latest ones.



Resource Plugin: Unslider.js


Implementation

Include jQuery and Unslider

To use Unslider, you’ll need to make sure both the Unslider and jQuery scripts are included. If you’ve already got jQuery (you can test by opening your JavaScript console and typing !!window.jQuery — if it says true, you have jQuery), you don’t need to add the first line.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script src="js/jquery.event.move.js"></script>
<script src="js/jquery.event.swipe.js"></script>

<script src="js/unslider.min.js"></script>

Ready your HTML

Unslider doesn’t need any really awkward markup. In fact, all you need is a div and an unordered list. An example of some Unslider-friendly HTML is on the right.

You can add as many slides as you want: the example on the right just has three for the sake of brevity, but Unslider won’t work properly with one slide (but then it’s just a box).

<div class="banner">
    <ul>
        <li style="background-image: url('img/sunset.jpg');">
            <div class="inner">
                <h1>The jQuery slider that just slides.</h1>
                <p>No fancy effects or unnecessary markup, and it’s less than 3kb.</p>
            </div>
        </li>

        <li style="background-image: url('img/wood.jpg');">
            <div class="inner">
                <h1>Fluid, flexible, fantastically minimal.</h1>
                <p>Use any HTML in your slides, extend with CSS. You have full control.</p>
            </div>
        </li>

        <li style="background-image: url('img/subway.jpg');">
            <div class="inner">
                <h1>Open-source.</h1>
                <p>Everything to do with Unslider is hosted on GitHub.</p>
            </div>
        </li>

        <li style="background-image: url('img/shop.jpg');">
            <div class="inner">
                <h1>Uh, that’s about it.</h1>
                <p>I just wanted to show you another slide.</p>
            </div>
        </li>
    </ul>
</div>


Adding previous/next links

<!-- The HTML -->
<a href="#" class="unslider-arrow prev">Previous slide</a>
<a href="#" class="unslider-arrow next">Next slide</a>

<!-- And the JavaScript -->
<script>
    var unslider = $('.banner').unslider();
    
    $('.unslider-arrow').click(function() {
        var fn = this.className.split(' ')[1];
        
        //  Either do unslider.data('unslider').next() or .prev() depending on the className
        unslider.data('unslider')[fn]();
    });
</script>


Properties

var slidey = $('.banner').unslider(),
    data = slidey.data('unslider');
    
//  Start Unslider
data.start();

//  Pause Unslider
data.stop();

//  Move to a slide index, with optional callback
data.move(2, function() {});
//  data.move(0);

//  Manually enable keyboard shortcuts
data.keys();

//  Move to the next slide (or the first slide if there isn't one)
data.next();

//  Move to the previous slide (or the last slide if there isn't one)
data.prev();

//  Append the navigation dots manually
data.dots();



demo
download html
download js
source github
source

Advertisement
Tags: slider, unslider, plugin, js, javascript, jquery, images, reponsive, html, css, design, elements

Leave a Comment

No Comment

© Creative3x Ltd.