anoSlide - Ultra lightweight responsive jQuery carousel

anoSlide is ultra lightweight responsive jQuery carousel plugin. It's suitable for implementing a carousel for both desktop and mobile viewports.


Features

  1. Responsive - Adjusts to any viewport width
  2. Mixed content
  3. No CSS required
  4. Lightweight (< 8 kb uncompressed)
  5. Built on top of jQuery
  6. Integrated image preloader
  7. Callback functions - onConstruct, onStart, onEnd
  8. Multiple configurable options
  9. Lazy load for images
  10. Automatic rotation
  11. Easy extend (See Demo page)

Requirements

  1. jQuery 1.9+

Configuration 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

Demo

Please find below a link to online demo of anoSlide - Ultra lightweight responsive jQuery carousel

Download

Please find below a link to downloadable Zip file.

Report an issue/bug

Please use the following form to report an issue/bug you've found in anoSlide - Ultra lightweight responsive jQuery carousel. We will review the reported issue and get in touch with you as soon as possible.
* Note:Your email and personal information WILL NOT be used for any other purpose except for posting back bug related information.



If you like this tool, share it with your friends

Who are we

Anowave is in business since year 2007. Since then we've been developing web sites for customers in UK. We are focused primarily on providing web based solutions build on top of open source technologies such as PHP, MySQL etc. The company is powered by highly skilled professionals including top level software developers, talented graphic designers and broadminded managers.

Unlike other development companies, we are focused on providing a solid, high performance and 100% bespoke software for our clients and partners. We've been developing an in-house content management system called Anowave.