Unslider - simplest jQuery slider

Features

Fluid, flexible, fantastically minimal.

Use any HTML in your slides, extend with CSS. You have full control.

Open-source.

Everything to do with Unslider is hosted on GitHub.

Cross-browser happy

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

Keyboard support

If you want to, you can add keyboard arrow support. Try it: hit left and right arrow keys.

Adjusts for height

Not all slides are created equal, and Unslider knows it. It’ll stylishly transition heights with no extra code.

Yep, it’s responsive

You’ll be hard pressed to find a site that’s not responsive these days. Unslider’s got your back.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: unslider.com

1. INCLUDE JS FILES

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

2. HTML

<div class="banner">
    <ul>
        <li>This is a slide.</li>
        <li>This is another slide.</li>
        <li>This is a final slide.</li>
    </ul>
</div>

3. CSS

.banner { position: relative; overflow: auto; }
.banner li { list-style: none; }
.banner ul li { float: left; }

4. JAVASCRIPT

$(function() {
    $('.banner').unslider();
});

5. OPTIONS

$('.banner').unslider({
	speed: 500,               //  The speed to animate each slide (in milliseconds)
	delay: 3000,              //  The delay between slide animations (in milliseconds)
	complete: function() {},  //  A function that gets called after every slide animation
	keys: true,               //  Enable keyboard (left, right) arrow shortcuts
	dots: true,               //  Display dot navigation
	fluid: false              //  Support responsive design. May break non-responsive designs
});

6. EXAMPLES

Touch support

If you want to add mobile/touch/swipe/whatever support to Unslider, you’ll need to include the jQuery.event.swipe plugin, then it’ll work out the box. Easy!

Adding previous/next links

A feature that’s often requested in Unslider, but isn’t included in-the-box, is previous/next links. Luckily, they’re easy enough to add with a little script, which utilises Unslider’s methods.

<!-- 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>

Accessing Unslider properties

Using jQuery’s wonderful data method, you can access and manually override any methods. Here’s a list of what you can do:

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();