Clean and Flexible jQuery Content Slider Plugin - unslider

Clean and Flexible jQuery Content Slider Plugin - unslider
File Size: 18.2 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

unslider is a responsive and cross-browser jQuery plugin for creating clean and flexible content sliders on your web site. unslider currently supports almost all the html elements like image, text, video, etc.


  • Lightweight (~3kb minified) and easy to implement
  • Responsive and cross-browser
  • Keyboard and Dot navigation support
  • Customizable transition animations
  • Touch & Swipe support
  • Prev/Next button support

Basic Usage:

1. Include jQuery library and jQuery unslider on the page

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

2. Include OPTIONAL javascript files for mobile support

<script src=""></script>
<script src=""></script>

3. Create a html list for your slider

<div class="demo">

<li style="background-image: url('img/1.jpg');">
<h1>Title 1</h1>

<li style="background-image: url('img/2.jpg');">
<h1>Title 2</h1>



4. Call the plugin with options

$(function() {
//  Should the slider move on its own or only when
//  you interact with the nav/arrows?
//  Only accepts boolean true/false.
autoplay: false,

//  3 second delay between slides moving, pass
//  as a number in milliseconds.
delay: 3000,

//  Animation speed in millseconds
speed: 750,

//  An easing string to use. If you're using Velocity, use a
//  Velocity string otherwise you can use jQuery/jQ UI options.
easing: 'swing', // [.42, 0, .58, 1],

//  Does it support keyboard arrows?
//  Can pass either true or false -
//  or an object with the keycodes, like so:
//  {
//   prev: 37,
//   next: 39
// }
//  You can call any internal method name
//  before the keycode and it'll be called.
keys: {
  prev: 37,
  next: 39

//  Do you want to generate clickable navigation
//  to skip to each slide? Accepts boolean true/false or
//  a callback function per item to generate.
nav: true,

//  Should there be left/right arrows to go back/forth?
//   -> This isn't keyboard support.
//  Either set true/false, or an object with the HTML
//  elements for each arrow like below:
arrows: {
  prev: '<a class="' + self._ + '-arrow prev">←</a>',
  next: '<a class="' + self._ + '-arrow next">→</a>'

//  How should Unslider animate?
//  It can do one of the following types:
//  "fade": each slide fades in to each other
//  "horizontal": each slide moves from left to right
//  "vertical": each slide moves from top to bottom
animation: 'horizontal',

//  If you don't want to use a list to display your slides,
//  you can change it here. Not recommended and you'll need
//  to adjust the CSS accordingly.
selectors: {
  container: 'ul:first',
  slides: 'li'

//  Do you want to animate the heights of each slide as
//  it moves
animateHeight: false,

//  Active class for the nav
activeClass: self._ + '-active',

//  Have swipe support?
//  You can set this here with a boolean and always use
//  initSwipe/destroySwipe later on.
swipe: true

Change logs:


  • Correct swiping behavior


  • CommonJS compatible


  • Remove wrong variable


  • use child selector instead of descendant selector



  • JS update.


  • fixed Modifying arrows


  • check slide position and swipe threshold before reverting slide back
  • add vertical animation support and some optimisation


  • use triple equals & clean up some comparisons

This awesome jQuery plugin is developed by idiot. For more Advanced Usages, please check the demo page or visit the official website.