jQuery Slider Plugin For Any Html Content - AnySlider

jQuery Slider Plugin For Any Html Content - AnySlider
File Size: 45.5KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: Free for personal use
   

How to start using jQuery?

More in this category...

View our Recommended Plugins

TOP 100 jQuery Plugins 2013

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 options

<script>
$(document).ready(function () {
$('#slider').AnySlider({
animation: 'fade', // slide or fade
interval: 3000, // Number of milliseconds to pause on each slide
rtl: true, // Whether to slide right-to-left instead of left-to-right when autoplay is enabled
showControls: false, // 
startSlide: 2, // Number of the starting slide.
easing: 'easeInOutExpo', // custom easing
delay: 300 // The delay (in milliseconds) between two fading slides.
});

});
</script>

Change log:

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.

For more Advanced Usages, please check the demo page or visit the official website.