Get started

1

Start by including jQuery and AnySlider. Preferably at the bottom of <body>.

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

2

Add some HTML markup.

<div id="slider">

	<div>

		The first slide.

	</div>

	<div>

		Another slide.

	</div>

	<div>

		And so on.

	</div>

</div>
				

Note: You're free to use any kind of elements. It's even possible to mix <div>s and <span>s for example. The <div>s used here are just an example.

3

Initialize Anyslider.

// Without any options
$("#slider").AnySlider();

// With options
$("#slider").AnySlider({
	// Options here
});
				

4

Add the three (four) lines of required CSS.

#slider {
	-ms-touch-action: none;
	overflow: auto;
	position: relative;
	touch-action: none;
}
				

5

Add some content and style AnySlider to your liking!

Features

  • Continuous autoplay.
  • Custom easings.
  • Fade or slide transition.
  • Highly customizable appearance and lots of options.
  • Keyboard navigation.
  • Multiple sliders on one page supported.
  • Navigation bullets.
  • No CSS or HTML-structure enforced, you're 100% in charge.
  • Slide any content or using any element. HTML, images and YouTube clips. Or mix <div>s, <span>s and <section>s. AnySlider doesn't care.
  • Small, 1.5 kB minified and gzipped.
  • Supported in all major browsers.
  • Touch support.

Lots of options

  • afterChange (Default function ()) function A function to call after each slide change.
  • afterSetup (Default function ()) function A function to call after the slider has been setup.
  • animation (Default slide") string Transition, "fade" or "slide".
  • beforeChange (Default function ()) function A function to call before each slide change.
  • bullets (Default true) boolean Whether or not to display navigation bullets. Setting this to false will prevent the bullets from being drawn at all.
  • delay (Default 300) integer The delay (in milliseconds) between two fading slides.
  • easing (Default "swing") string Name of a custom easing. For example via the jQuery Easing plugin. Only used when "animation" is "slide".
  • interval (Default 5000) integer Number of milliseconds to pause on each slide. Setting this option to 0 will disable autoplay.
  • keyboardNav (Default true) boolean Allow for keyboard navigation using the left and right arrow keys.
  • nextLabel (Default "Next slide") string Label for the next button.
  • pauseOnHover (Default true) boolean Pause the autoplay on hover?
  • prevLabel (Default "Previous slide") string Label for the previous button.
  • responsive (Default true) boolean Whether to enable responsive support.
  • rtl (Default false) boolean Whether to slide right-to-left instead of left-to-right when autoplay is enabled.
  • showControls (Default true) boolean Show/hide controls. Setting this to false will prevent the controls from being drawn at all.
  • speed (Default 400) int The animation time in milliseconds. Setting this option to 0 will disable animation.
  • startSlide (Default 1) int Number of the starting slide. Starting from 1.
  • touch (Default true) boolean Whether to enable the ability to swipe between slides.

Examples

Default options

Let's add a image.

Australian road sign picturing a kangaroo

Let's throw in a clip from Youtube while we're at it!

Code:
$("#example1").AnySlider();
				

Auto-play off, slower speed and a different easing

Let's add a image.

Australian road sign picturing a kangaroo

Let's throw in a clip from Youtube while we're at it!

Code:
$("#example2").AnySlider({
	easing: "easeOutBounce",
	interval: 0,
	speed: 1000
});
				

No navigation bullets or arrows

Let's add a image.

Australian road sign picturing a kangaroo

Let's throw in a clip from Youtube while we're at it!

Code:
$("#example3").AnySlider({
	bullets: false,
	showControls: false
});