jQuery Anyslider

A jQuery plugin which allows you to create a slider for any kind of content.

View the Project on GitHub

Getting started

1. Include jQuery and AnySlider

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

2. Add some markup

<div id="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

Options

Requirements

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');

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

Complete list of API methods