Unslider – Simplest Carousel Slider for jQuery

Unslider is an ultra-simplest jQuery carousel slider for your website. Despite being small, Unslider is very flexible and extensible. You can change pretty much anything via options/settings, methods or callback events.

Furthermore, it doesn’t have any fancy effects or unnecessary markups that make the site slow down. It comes with less than 3kb file size.

This jQuery slider is really easy to set up and even easy to use documentation. In short, Unslider jQuery Carousel is the quickest and allows developers the freedom to pretty much customize by using options/settings and methods.

In addition, it supports almost all kinds of HTML elements such as text, heading, images, video, etc.

Features:

Let’s have a look at some of the features of this jQuery carousel.

• Cross-browser Ready
  Unslider’s work well with all types of browsers which include desktop and as well on mobile browsers.
• Keyboard Arrow Support
  You can set the keyboard left and right arrow keys.
• Adjustable Height
  Without additionally coding, the slider automatically adjusts the heights with a stylish transition.
• Mobile-Friendly.
  It’s hard to find any site that isn’t responsive these days. The unslider.js works well on mobile, tablet and desktop.

How to Use jQuery Unslider

Add a reference to both jQuery and Unslider right before the closing </body> tag – like below, but:

1. Make sure jQuery is first! If not, you’ll get an error.
2. Make sure you put the right path to Unslider. If not, Unslider just won’t work.

<!-- There'll be a load of other stuff here -->
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

<script src="/path/to/unslider.js"></script>

In order to display properly, Unslider needs some styles applied to it. You can easily add them by linking them to the dist/css/unslider.css file. If you want styled dots as well, link to css/unslider-dots.css as well.

Note By default, the color of the styled dots is white. You can change this by compiling the LESS file and changing variables.less or manually editing anywhere it says #fff.

<link rel="stylesheet" href="/path/to/unslider/dist/css/unslider.css">

Setup Your HTML

Unslider uses an HTML element to wrap everything in and puts all the slides inside that as an unordered list.

You can put any HTML you’d like inside each slide. Here’s an example:

<div class="my-slider">
	<ul>
		<li>My slide</li>
		<li>Another slide</li>
		<li>My last slide</li>
	</ul>
</div>

Tell Unslider what to slide

We’re nearly there! All we need to do – whether in an external JavaScript file (if you’ve got one) or straight in your HTML file (it doesn’t matter either way!) is tell Unslider what element we want to slide.

Since we added the HTML for a slider with a class of my-slider, we can use $('.my-slider') to target it.

<script>
	jQuery(document).ready(function($) {
		$('.my-slider').unslider();
	});
</script>

You can add as many sliders as you like – and use any of the methods or options to tweak your slider.

Extending Unslider

Despite being small, Unslider is very flexible and extensible: you can change pretty much anything via options/settings, methods or callback events – all of which are documented below.

Automatic support

Unslider automatically supports a few different scripts, provided the <script> tag is referenced before Unslider.

Right-to-left (RTL) support

Just add dir="rtl" and Unslider will change the slide direction if needed.

<div class="my-slider" dir="rtl"></div>

Velocity.js visit site

A faster alternative to jQuery’s .animate(). If you find your sliders are looking a bit sluggish, it’s highly recommended to add Velocity, as it can make a marked improvement.

<script src="//cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js"></script>

jQuery.swipe.js visit site

Add swipe support for mobile and desktop to your sliders. See the initSwipe and destroySwipe methods below for more info on how this works.

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

Methods

Unslider has a handful of methods you can use to control your slider and two ways you can use these methods, as shown below.

//  Assuming we've got a variable set like this...
var slider = $('.my-demo-slider').unslider();

// Method 1
slider.data('unslider').methodName();
slider.data('unslider').methodName('arguments', 'go', 'here');

// Method 2 (the shorthand version)
slider.unslider('methodName');
slider.unslider('methodName:arguments,go,here');

var slider = $('.my-slider').unslider();

// I don't like this last slide, let's get rid of it
slider.find('li:last').remove();

// Let's recalculate Unslider so it knows what's going on
slider.unslider('calculateSlides');

$('.sliderman').unslider();

//  Let's say we want to use $.getScript to load our scripts for some reason
var scripts = [
	'http://stephband.info/jquery.event.move/js/jquery.event.move.js',
	'http://stephband.info/jquery.event.swipe/js/jquery.event.swipe.js'
];

$.getScript(scripts[0]);

//  Once our script is loaded, we can initSwipe to add swipe support
$.getScript(scripts[1], function() {
	$('.sliderman').unslider('initSwipe');
});

//  Our trusty slider!
var slider = $('.slider').unslider();

//  Move to the first slide
slider.unslider('animate:first');

//  Move to the third slide
//  Remember, slides are zero-indexed so 0 is first slide, 1 is second, etc.
slider.unslider('animate:2');

//  Move to the last slide
slider.unslider('animate:last');

//  Move to the last slide and add a direction
slider.unslider('animate:last,prev');

Events

Unslider triggers some event listeners which might be handy for whatever reason, I guess.

//  Set up our slider to automatically move every second so we can see what's happening
var slider = $('.slider').unslider({ autoplay: true, delay: 1000 });

//  When the slider has been set up, fire the event off.
slider.on('unslider.ready', function() {
	alert('Slider is set up!');
});

//  Listen to slide changes
slider.on('unslider.change', function(event, index, slide) {
	alert('Slide has been changed to ' + index);
});

Advanced Options

Unslider uses a standard jQuery plugin options object, which looks like the highlighted example below:

$('.my-demo-slider').unslider({
	settingName: settingValue,
	anotherSetting: anotherValue
});

It’s not required to have any of these options set — you can leave these all blank and they’ll fall back to the defaults highlighted in the table below.

keys: {
	prev: 37,
	next: 39,
	stop: 27 >//  Example: pause when the Esc key is hit
}

nav: function(index, label) {
	>//  $(this) is the current index slide
	>//  label is the current label
	>//  index is the slide index, starting at 0

	>//  On the third slide, append " third slide!"
	if(index === 2) {
		return label + ' third slide!';
	}

	>//  Only show the number
	return index + 1;
}

arrows: {
	>//  Unslider default behaviour
	prev: '<a class="unslider-arrow prev">Previous slide</a>',
	next: '<a class="unslider-arrow next">Next slide</a>',

	>//  Example: generate buttons to start/stop the slider autoplaying
	stop: '<a class="unslider-pause" />',
	start: '<a class="unslider-play">Play</a>'
}

selectors: {
	container: 'ul:first',
	slides: 'li'
}