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

AnySlider is an easy-to-use and touch-enabled jQuery plugin that allows you to create an customizable slider for any html content like image, text, video, etc.

Content-slider

Documentation

AnySlider 2.1.0

A jQuery/Zepto.js plugin for creating a slider for any kind of content.

Building AnySlider

To build and automatically minify and run JSHint on the code you'll need the latest Node.js/npm and Git. Please refer to their respective home pages for installation instructions.

Then install the grunt-cli package globally (if not done already):

npm install -g grunt-cli

Then install the Node dependencies:

cd AnySlider && npm install

Now, to get a minified and linted version of AnySlider run:

grunt

If all goes well and your code passes the lint a file called "jquery.anyslider.min.js" will be created in the "dist" directory.

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 (3.5 kB minified).
  • Supported in all major browsers.
  • Touch support (Android, iOS, and Windows 8).

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, one of the following:
    • fade Fades between slides.
    • slide A sliding aniamtion between slides.
  • beforeChange (Default function ()) function A function to call before each slide change.
  • 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.
  • keyboard (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.
  • reverse (Default false) boolean Whether to slide right-to-left instead of left-to-right when autoplay is enabled.
  • showBullets (Default true) boolean Whether or not to display navigation bullets. Setting this to false will prevent the bullets from being drawn at all.
  • 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.

Requirements

  • jQuery 1.7.0 (or later).
  • Or Zepto 1.1.0 (or later) with the following modules:
    • zepto
    • data
    • event
    • fx
    • fx_methods
    • ie (Optional, if IE10+ support is wanted)

License

Free to use and abuse under the MIT license.


You May Also Like