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.

Features:

• 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>
</div>
</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 () {
$('#slider').AnySlider();
});

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.