Unslider – Simplest Carousel Slider for jQuery

Category: Slideshow | January 5, 2020
Unslider - Simplest Carousel Slider for jQuery
Author: idiot
Official Page: Go to Website
Last Update: January 5, 2020
License: MIT

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');
Option Description, Default, Type
init args: options Set everything up with the slider. This is called automatically when you set up .unslider() for the first time, but if there are layout problems or you want to re-initiate the slider for some reason, you can call it here. The options variable is an object (see below). You can’t call options with the shorthand .unslider('init') method.
calculateSlides If a slide gets added or removed, you should call this otherwise things’ll probably break.

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');
start Make the slider move between slides. Will use the options object to determine the delay between slides.
stop Stop the slider moving itself between slides. Will stop any auto-playing.
destroyKeys Remove any keyboard shortcut handlers for the slider.
initKeys Manually add keyboard shortcut support. Can be used after destroyKeys to restore keyboard shortcut support, or with {keys: false} in the options object to add support later on.
initSwipe Set up swipe functionality manually (i.e if you want to defer loading). You can add it automatically by including jquery.event.move and jquery.event.swipe in your code. If you need to add it after page load, you can call initSwipe, like so:

$('.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');
});
destroySwipe Remove swipe support. Does what it says on the tin.
setIndex args: to Set the current index and navigation for Unslider. This doesn’t move the slider! You can get some goofy results doing this – if you want to move the slider to a specific slide, I’d recommend you use animate() instead.

The argument to can be an integer with the index of the slide you want to set (remember: indexes start at zero!), or the strings 'first' or 'last' if you don’t know how many slides there are.

animate args: to, dir Move the slider to a specific slide, update any navigation and fire a unslider.change event. Use like so:

//  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');

The argument to is required and can be an integer with the index of the slide you want to set (remember: indexes start at zero!), or the strings 'first' or 'last' if you don’t know how many slides there are.

The argument dir is optional and can either be the string 'prev' or 'next'. This doesn’t do anything, yet.

next Manually move to the next slide (or the first slide if you reach the last slide).
prev Same thing as .unslider('next') but in the other direction. Moves the slider backward manually or to the last slide if there’s no more behind it.

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.

Option Description, Default, Type
autoplay default: false Should the slider move by itself or only be triggered manually?
speed default: 750 How fast (in milliseconds) Unslider should animate between slides.
delay default: 3000 If autoplay is set to true, how many milliseconds should pass between moving the slides?
index default: 'first' If this is set to an integer, 'first' or 'last', it’ll set the default slide to that position rather than the first slide.
keys default: true Do you want to add keyboard shortcut support to Unslider? This can be set to either true, false, or an options/keycode object, like so:

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

This can be useful if you want to extend the functionality built-in to Unslider.

nav default: true Do you want to generate automatic clickable navigation for each slide in your slider?

You can over-ride what appears in each link by adding a data-nav="nav title" parameter to each slide element (replacing ‘nav title’ with whatever you’d like the title to be).

If you want to add dot-navigation to a slide, simply include unslider-dots.css to your CSS file.

New You can also provide a function to calculate the slide label:

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 default: true Do you want to add left/right arrows to your slider? You can style these in your CSS by writing rules for .unslider-arrow (or alternatively you can change the HTML string to whatever you like and style that).

This can be set to either true, false, or an options object. If you set an options object, the default behavior will be overwritten. The default object looks like this:

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>'
}

This option is a bit of a misnomer, as you can set it to generate anything, not just arrows.

animation default: 'horizontal' How should Unslider animate each slide? Right now, there’s three different animation types:

  1. 'horizontal', This moves the slides from left-to-right
  2. 'vertical', Allow you to moves the slides from top-to-bottom
  3. 'fade', For crossfades slides
selectors If you’re not using an unordered list to display your slider, you’ll need to add a selectors object referencing what elements Unslider should look for. The container should be the “conveyor belt” that gets moved, and the slides are – well – the slides.

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

Note: you’ll probably also need to update/write custom CSS in order for Unslider to work. Check the source files for unslider.less to get a better idea of what needs styling.

animateHeight default: false Should Unslider animate the height of the container to match the current slide’s height? If so, set to true.
activeClass default:
'unslider-active'
What class should Unslider set to the active slides and navigation items? Use this if you want to match your CSS.

You May Also Like

Leave a Comment