Clean and Flexible jQuery Content Slider Plugin - unslider

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.

Features:

• 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="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="unslider.min.js"></script>

2. Include OPTIONAL javascript files for mobile support

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

3. Create a html list for your slider

<div class="demo">
<ul>

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

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

...

</ul>
</div>

4. Call the plugin with options

$(function() {
$('.demo').unslider({
//  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
});
});

Changelog:

2020-12-15

• Fixed Demo & Download link. Thanks to @Chris Lashmar.

2017-08-16

• Add noloop functionality, doesn't work when infinite option is true.

2016-02-06

• Correct swiping behavior

2016-02-03

• CommonJS compatible

2016-01-14

• Remove wrong variable

2016-01-09

• use child selector instead of descendant selector

2016-01-02

• JS update.

2015-12-24

• JS update.

2015-12-11

• fixed Modifying arrows

2015-11-21

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

2015-04-12

• 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.