jQuery Content Slider Plugin with CSS3 Animations - aslider

aslider is a lightweight and highly customizable jQuery content slider plugin that features CSS3 animations, vertical sliders, easing effects, and much more. It is designed for responsive web layout and supports keyboard navigation.

Basic Usage:

1. Include jQuery javascript library and the jQuery aslider plugin at the bottom of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="jquery.aslider.min.js"></script> 

2. Wrap the Html contents in a container as follows. The plugin supports any Html elements not only images.

<div class="slider">
<ul class="pages">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<p class="ctrls"> <a class="prev" href="#">Prev</a> <a class="next" href="#">Next</a> </p>
</div>

3. A little CSS to style the content slider.

.slider {
position: relative;
overflow: hidden;
width: 100%;
min-height: 200px;
margin: 10px auto;
text-align: center;
}
.slider .pages {
position: absolute;
width: 300%;
margin: 0;
padding: 0;
list-style: none;
-webkit-transition: -webkit-transform 400ms ease-in-out;
-moz-transition: -moz-transform 400ms ease-in-out;
-ms-transition: -ms-transform 400ms ease-in-out;
-o-transition: -o-transform 400ms ease-in-out;
transition: transform 400ms ease-in-out;
}
.slider li {
float: left;
width: 33.33%;
height: 200px;
}
.slider .ctrls {
position: absolute;
bottom: 0;
width: 98%;
margin: 0;
padding: 0.5em 1%;
}
.slider .prev {
float: left;
}
.slider .next {
float: right;
}
.slider .disabled {
color: silver;
cursor: default;
}

4. Call the plugin with default options.

<script>
$(function () {
$('.slider').aslider();
});
</script>

5. Available options.

<script>
$(function () {
$('.slider').aslider({
next: '.next', // also accepts a jQuery object
prev: '.prev', // also accepts a jQuery object
pageHolder: '> ul', // element whose children (or specified by selector) are the actual pages, also accepts a jQuery object
pageSelector: null, // if null, children of pageHolder are assumed to be the pages. if not, the selector is applied on pageHolder
itemsPerPage: 1,
slideSpeed: 400,
initialIndex: 0,
behaviourAtEdge: 'none', // 'reset', 'none'
disabledClass: 'disabled', // may also be null or empty string,
beforeSlide: null, // passed the index being seeked to as param
afterSlide: null, // passed currentIndex as param
animation: true, // whether to use $.animate or simply set the css property
easing: 'swing', // $.animate easing
vertical: false, // up/down vs left/right slider
property: 'position', // currently supported: 'position' and 'transform'. if set to 'transform', the plugin will not animate the slide so use css transitions instead
keys: false // whether or not it can be controlled by keyboard arrows
});
});
</script>

6. APIs.

afterSlide: function ([callback]) // used to either set a new afterSlide callback or to call the currently set callback, if any
beforeSlide: function ([callback]) // used to either set a new afterSlide callback or to call the currently set callback, if any
first: function ([callback]) // slide to the first item
last: function ([callback]) // slide to the last item
prev: function ([callback]) // slide to the previous item
next: function ([callback]) // slide to the next item
seek: function (index, [callback]) // slide to a certain index. if index is out of bounds this will do nothing
getCurrentIndex: function ()
getOptions: function () // returns the options object
getPageCount: function ()
getPageHolder: function ()
getPages: function ()
getVersion: function () // returns current plugin version
off: function ([alsoDisableApiMethods = true]) // turns off the event listeners on the prev, next buttons and disables keyboard keys. If alsoDisableApiMethods is true (default), this also disables the api methods so that e.g. calling any of the api methods (except these low-level methods) won't work. Note that you can call on later on to enable the event listeners and api methods.
on: function ([alsoEnableApiMethods = true]) // turns on the event listeners on the prev, next buttons and enables keyboard keys if they were previously disabled. If alsoEnableApiMethods is true (default), this also enables the api methods.
isOff: function () // whether or not the slider is off
isOn: function () // whether or not the slider is on
methodsDisabled: function () // whether or not the api methods are disabled
methodsEnabled: function () // whether or not the api methods are enabled

Change logs:

2016-01-04

• v2.0.4

2015-12-21

• v2.0.3: Bugfix: Ensure 'this' is defined in beforeSlide and afterSlide callbacks

2015-12-18

• Revise to Release 2.0.2

2015-12-11

• updated to v1.2.2
• Bugfix: Fixed rounding off of totalRows, totalColumns

2015-12-08

• updated to v1.2.1

2014-08-22

• updated to v1.1

2014-05-08

• fixed left/top animations

---

This awesome jQuery plugin is developed by joelmukuthu. For more Advanced Usages, please check the demo page or visit the official website.