Download
User Rating: 3/5 ( 2 votes)
anoSlide is ultra lightweight responsive jQuery carousel plugin. It's suitable for implementing a carousel for both desktop and mobile viewports.
Features
-
Responsive - Adjusts to any viewport width
-
Mixed content
-
No CSS required
-
Lightweight (< 8 kb uncompressed)
-
Built on top of jQuery
-
Integrated image preloader
-
Callback functions - onConstruct, onStart, onEnd
-
Multiple configurable options
-
Lazy load for images
-
Automatic rotation
-
Easy extend (See Demo page)
Requirements
Source: anowave.com
1. INCLUDE JS FILES
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.anoslide.js"></script>
2. HTML
<div class="carousel">
<a class="prev"></a>
<ul>
<li>Content goes here</li>
<li>Content goes here</li>
<li>Content goes here</li>
</ul>
<a class="next"></a>
</div>
3. JAVASCRIPT
$('.carousel ul').anoSlide(
{
items: 1,
speed: 500,
prev: 'a.prev',
next: 'a.next',
lazy: true,
auto: 4000
});
4. OPTIONS
items |
Number of visible items (1 or more)
Determines the number of visible items in the carousel. |
speed |
Animation duration in milliseconds (ms)
Use this setting to adjust the animation duration between slides. |
auto |
Enable automatic slide (milliseconds)
This option sets the carousel to slide automatically. It accepts milliseconds as value. |
autoStop |
Enable automatic pause on hover (boolean)
This option allows for automatic pause of the carousel upon mouseover. |
next |
Next selector
A jQuery selector triggering next slide. Use this to adjust next arrow. |
prev |
Prev selector
A jQuery selector triggering previous slide. Use this to adjust prev arrow. |
responsiveAt |
Alter carousel below certain viewport (integer)
This option forces the carousel to show one item at a time below certian viewport with. Suitable to really small viewports such as iPhone. Default 480. |
delay |
Delay (milliseconds)
Add delay between each slide's animation. Use this option to achieve a swinging effect. Default 0. |
lazy |
Lazy load (true or false)
Anoslide is equiped with advanced image preloader which allows for lazy load of images. To activate lazy load set this option to true, and then in each slide add the following code:
<img data-src="image.jpg" src="" />
* Note that src attribute should be empty and data-src attribute is used instead.
|
onConstruct |
Callback function
Triggered once at construction time
Params:
instance - Instance of anoSlide
|
onStart |
Callback function
Triggered when animation starts
Params:
ui - JSON Object
JSON Properties
ui.instance - Instance of anoSlide
ui.index - Number of current slide
ui.slide - Current slide
ui.slide.element - Current slide element
|
onEnd |
Callback function
Triggered when animation ends
Params:
ui - JSON Object
JSON Properties
ui.instance - Instance of anoSlide
ui.index - Number of current slide
ui.slide - Current slide
ui.slide.element - Current slide element
|