jQuery Anyslider

Getting started

1. Include jQuery and AnySlider

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

2. Add some markup

<div class="slider">

    <div>

        The first slide.

    </div>

    <div>

        Another slide.

    </div>

    <div>

        And so on.

    </div>

</div>

3. Initialize Anyslider

// Without any options
$('.slider').anyslider();

// With options
$('.slider').anyslider({
    // Options here
});

4. Add the four lines of required CSS.

.slider {
    overflow: auto;
    position: relative;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
}

Features

• Continuous autoplay.
• Custom easings.
• Fade or slide transition.
• Highly customizable appearance and lots of options.
• Keyboard navigation.
• Possibility to have multiple sliders on the same page.
• 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 (3.5 kB minified).
• Supported in all major browsers.
• Touch support (Android, iOS, and Windows 8).
• Responsive
• A simple API.
• Support for AMD loaders.

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, one of the following:
  • fade Fades between slides.
  • slide A sliding aniamtion between slides.
• beforeChange (Default function ()) function A function to call before each slide change.
• 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.
• keyboard (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.
• reverse (Default false) boolean Whether to slide right-to-left instead of left-to-right when autoplay is enabled.
• showBullets (Default true) boolean Whether or not to display navigation bullets. Setting this to false will prevent the bullets from being drawn at all.
• 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.

Requirements

• jQuery 1.7.0 (or later).
• Or Zepto 1.1.0 (or later) with the following modules:
  • zepto
  • data
  • event
  • fx
  • fx_methods
  • ie (Optional, if IE10+ support is wanted)

API

As of 2.0.0 AnySlider features a simple API to interact with the slider.

var slider = $('.slider').anyslider();
var anyslider = slider.data('anyslider');

anyslider.goTo(3); // Go to slide number 3

Complete list of API methods

• currentSlide() - Get the number of the current visible slide.
• goTo(slide) - Go to a specific slide.
• next() - Go to the next slide.
• pause() - Stop autoplay.
• play() - Start autoplay.
• prev() - Go to the previous slide.