Download
User Rating: 0/5 ( 0 votes)
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.
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!
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.
JS Tutorial
