Skip to content
A customizable carousel widget.
JavaScript CSS
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
build
sample
src/atplugins/carousel
test
.gitignore
Gruntfile.js
LICENSE
README.md
package.json

README.md

Carousel widget plugin for Aria Templates

A simple AT carousel widget (as used on http://ariatemplates.com)

Documentation

Check the sample code for a quick start.

The widget parameters are:

  • width (number, mandatory) width of the carousel
  • height (number, mandatory) height of the carousel
  • titleheight (number) height of the captions on each image
  • images (array, mandatory) array of images (URL "http://www.example.com") or image definitions (URL + caption {src : "http://www.example.com", title : "example"})
  • loop (string, bindable) type of loop (see below)
  • index (number, bindable) index of the image to be displayed first
  • cssClass (string) CSS class or space-separated list of CSS classes to apply to the carousel container
  • transitionCSS (string) part of the CSS declaration defining the duration and timing of the transition (e.g. "1s ease-in-out")

The different types of loop are:

  • continuous (default) seamless loop
  • stop no animation
  • rewind scrolls back to first / last image
  • reverse changes direction when the first / last image is reached

Disclaimer

The widget only works with IE9+ because it's using Array.map() and I'm too lazy to rewrite it.

Usage

To use it, there is a set a scripts that are available after the usual npm install:

  • npm run-script lint : runs JShint, verifies lowercaseand checks files indentation
  • npm run-script build : packages the plugin only with atpackager and put the results in build/output folder
  • npm run-script test : run all unit tests in PhantomJS with attester
  • npm run-script start : starts attester and waits for real browsers to connect
  • npm run-script sample : starts a webserver to run the samples (at http://localhost:8080/ or http://localhost:8080/index.html?devMode=true )

Structure

Here is the description of the different elements of the package:

Description
[build] Scripts and configuration files to package the plugin
Gruntfile.js One build scripts
package.json Meta-data
README.md Documentation
[sample] Code of the sample
server.js Script to launch the sample webserver
[src] Source code
[test] Test suites and test configuration
Something went wrong with that request. Please try again.