🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

aslider is a lightweight and highly customizable jQuery content slider plugin that features CSS3 animations, vertical sliders, easing effects, and much more.

Content-slider

Documentation

jquery-aslider

Dependency Status Licence Bower version npm version

slider plugin for jQuery, supports CSS animations and grid transitions. Demo

Features

  • Supports CSS transitions as well as jQuery animations (which ideally should be used only as a fallback)
  • Supports grid (vertical, horizontal and diagonal) transitions. It calculates what row and column an item is on when transitioning to it.
  • Plays nice with responsive designs. It doesn't add any CSS to make the elements responsive but doesn't interfere with those styles either.
  • Supports items (pages) of unequal sizes. This is especially nice for vertical sliders.
  • Provides an API for you to programmatically initiate transitioning to an item, for instance for adding touch support.
  • Does not add unnecessary CSS to the elements, besides transform, left and top properties which are required for the transitioning.
  • Has built in support for up, down, left, right, previous, next, first and last buttons (even their disabled states).
  • Has built in support for keyboard navigation using the arrow keys.
  • Supports before and after-slide callbacks.

Installation

Install with bower:

bower install jquery-aslider

Or with npm:

npm install jquery-aslider

Or simply download the latest release.

Usage

First, include jQuery and jquery-aslider on your page. Then to create a slider:

HTML:

<div class="slider">     <ul>         <li>one</li>         <li>two</li>         <li>three</li>     </ul> </div>

CSS:

.slider {     position: relative; /* 1 */     overflow: hidden; /* 1 */ }  .slider ul {     position: absolute; /* 1 */     width: 300%; /* 2 */     list-style: none; /* 3 */     margin: 0; /* 3 */     padding: 0; /* 3 */ }  .slider li {     float: left; /* 3 */     width: 33.33%; /* 2 */ }  .slider li:nth-child(odd) { background: #F6F4F0; } /* 3 */ .slider li:nth-child(even) { background: #cdcdcd; } /* 3 */

1 - required, 2 - make it responsive, 3 - aesthetics

JavaScript:

$('.slider').aslider();

Documentation

Have a look at the docs for all the configuration options, API methods and examples. For more examples, also have a look at the example or view the source on the demo site.

License

The MIT License

Contributing

Fork, update and submit a pull request.


You May Also Like