jQuery Slider Plugin For Any Html Content - AnySlider

File Size: 51.8 KB
Views Total: 4607
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Slider Plugin For Any Html Content - AnySlider

AnySlider is an easy-to-use and touch-enabled jQuery plugin that allows you to create an customizable slider for any html content like image, text, video, etc.


  • Lightweight and easy to use
  • Keyboard navigation supported
  • With fade or slide transitions, and custom easings
  • Autoplay supported
  • A lot of options to customize your own slider

Basic Usage:

1. Markup html structure

<div class="slider-wrapper">
<div class="slider" id="slider"> 
<span> Content 1 </span>
<section> Content2 </section>
<div> Content 3</div>

2. Include jQuery library and jQuery AnySlider on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="jquery.anyslider.js"></script> 

3. Include easing plugin for easing effect

<script src="jquery.easing.1.3.js"></script> 

4. Include jQuery AnySlider CSS to style your slider

<link rel="stylesheet" href="jquery-anyslider.css">

5. Call the plugin with default options

$(document).ready(function () {

6. All the default options.

  • afterChange: function () {}: A function to call after each slide change.
  • afterSetup: function () {}: A function to call after the slider has been setup.
  • animation: 'slide': slide or fade
  • beforeChange: function () {}: A function to call before each slide change.
  • easing: 'swing': Easing options.
  • interval: 5000: Number of milliseconds to pause on each slide. Setting this option to 0 will disable autoplay.
  • keyboard: true: Allow for keyboard navigation using the left and right arrow keys.
  • nextLabel: 'Next slide': Label for the next button.
  • pauseOnHover: true: Pause the autoplay on hover
  • prevLabel: 'Previous slide': Label for the prev button.
  • reverse: false: Whether to slide right-to-left instead of left-to-right when autoplay is enabled.
  • showBullets: true: Whether or not to display navigation bullets. Setting this to false will prevent the bullets from being drawn at all.
  • showControls: true: Show/hide controls. Setting this to false will prevent the controls from being drawn at all.
  • speed: 400: The animation time in milliseconds. Setting this option to 0 will disable animation.
  • startSlide: 1: Number of the starting slide. 
  • touch: true: Whether to enable the ability to swipe between slides.

Change logs:

v2.1.0 (2015-11-22)

  • Fix vertical scrolling problem. 

v2.0.2 (2014-12-19)

  • Version bump for npm after bower.json update.

v2.0.0 (2014-08-15)

  • AnySlider now features an API. 
  • Added support for Zepto.js.
  • Increased minimum required jQuery version to 1.7.0 (was 1.5.0).
  • True crossfade for slides.
  • Added support for AMD.
  • Changed the $.fn namespace name to anyslider (note casing).
  • Changed touch-action: none; to touch-action: pan-y; in the default CSS.
  • Removed delay options.
  • responsive (AnySlider is now responsive by default).
  • Renamed some options.

v1.7.1 (2014-03-08)

  • Fixed a bug where the keyboard navigation wouldn't work.

v1.7.0 (2013-12-18)

  • It's now possible to scroll while touching the slider.
  • Added namespaces to all events.
  • Removed the data-num attribute on navigation bullets.

v1.6.1 (2013-07-18)

  • Slides will always be cloned again, only cloning when there's more than one slide caused too much trouble at this point.

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