Version 1.3 glow.widgets.Carousel
API Quick Reference
JavaScript is required to use the quick reference
Sroll through a list of items
Further Info & Examples
Constructor
new glow.widgets.Carousel(container, opts)Parameters
- container
The container of items to display as a carousel.
- opts
- Type
- Object
Options object
- animDuration
Duration of animation in seconds.
- Type
- Number
- Default
- 0.2
- Optional
- Yes
- animTween
A Glow tween function to animate scrolling.
- Type
- Function
- Default
- glow.tweens.easeBoth()
- Optional
- Yes
- className
List of additional space separated class names to apply to the container.
- Type
- String
- Optional
- Yes
Space separated values.
- id
An ID to apply to the container element.
- Type
- String
- Optional
- Yes
- loop
True if the carousel should loop when it gets to the end.
- Type
- Boolean
- Default
- false
- Optional
- Yes
When using the loop option, you should include some indication as to how far the user has scrolled through the carousel.
- pageNav
Display navigational display/controls next to the carousel.
- Type
- Boolean
- Default
- false
- Optional
- Yes
- scrollOnHold
Continue to scroll while button is held down.
- Type
- Boolean
- Default
- true
- Optional
- Yes
- size
Size carousel to display specified number of items
- Type
- Number
- Optional
- Yes
By default, the carousel will fill all available horizontal (or vertical) space.
- slideOnScroll
Use sliding animation when scrolling continuously.
- Type
- Boolean
- Default
- false
- Optional
- Yes
- step
Number of items to scroll by.
- Type
- Number
- Default
- 1
- Optional
- Yes
- theme
Visual Theme
- Type
- String
- Default
- "light"
- Optional
- Yes
Only applies when using the default template. Currently supported themes are "dark" and "light".
- vertical
Used to create a vertical oriented carousel
- Type
- Boolean
- Default
- false
- Optional
- Yes
Examples
var myCarousel = new glow.widgets.Carousel("#carouselContainer", { loop: true, size: 4, step: 4 });
Properties
- element
Carousel HTML Element.
- Type
- NodeList
- items
NodeList of the items within the carousel.
- Type
- NodeList
Methods
- addItems
Used to add one or more new items to the carousel.
Synopsis
myCarousel.addItems(itemsToAdd, position);Parameters
- itemsToAdd
- Type
- glow.dom.NodeList | Element | Selector
A NodeList of items to add to the carousel.
- position
- Type
- Number
- Optional
- Yes
Index at which to insert the items. By default, items will be added to the end of the carousel.
- moveBy
Scrolls the carousel backwards or forwards through the items.
Synopsis
myCarousel.moveBy(distance, animate);Parameters
- distance
- Type
- Number
The number of items to move by. Positive numbers move forward, negative move backwards.
- animate
- Type
- Boolean
Set to false to disable animation.
Description
Note: You cannot send a carousel out of sync with its step. It will scroll to a position where the item you've asked to move to is visible.
- moveTo
Scroll to a specified position in the carousel.
Synopsis
myCarousel.moveTo(targetItem, animate);Parameters
- targetItem
- Type
- Number
The index of the item to appear in the leftmost visible position of the carousel.
- animate
- Type
- Boolean
Set to false to disable animation.
Description
Note: You cannot send a carousel out of sync with its step. It will scroll to a position where the item you've asked to move to is visible.
- next
Scroll forward by the number of items definded by step in the constructor.
Synopsis
myCarousel.next();- prev
Scroll backwards by the number of items defined by step in the constructor.
Synopsis
myCarousel.prev();- removeItem
Remove an item from the carousel.
Synopsis
myCarousel.removeItem(indexToRemove);Parameters
- indexToRemove
- Type
- Number
A numeric index of the item to remove.
Returns
Removed item.
- visibleIndexes
Returns an array of numeric indexes of the currently visable items in the carousel.
- visibleItems
Returns a NodeList of all items currently visible in the carousel.
Events
- addItem
One or more items about to be added to the carousel.
Synopsis
glow.events.addListener(myCarousel, "addItem", function(event) { // ... });Arguments
- event
Description
New items NodeList can be found on the 'items' property of the event object. Canceling this event stops the items being added.
- removeItem
Item about to be removed.
Synopsis
glow.events.addListener(myCarousel, "removeItem", function(event) { // ... });Arguments
- event
Description
The event contains properties 'item' a NodeList representing the item to be removed, and 'itemIndex', the index of the item. Canceling this event results in the item not being removed.
- scroll
Fired before scrolling.
Synopsis
glow.events.addListener(myCarousel, "scroll", function(event) { // ... });Arguments
- event
Description
The event object contains the properties 'currentPosition' containing the carousel's current position.
- afterScroll
Fired after scrolling animation is complete.
Synopsis
glow.events.addListener(myCarousel, "afterScroll", function(event) { // ... });Arguments
- event
Description
The event object contains the property 'position' containing the carousel's new position.
- itemClick
Fired when an item within the carousel is clicked.
Synopsis
glow.events.addListener(myCarousel, "itemClick", function(event) { // ... });Arguments
- event
Description
The event contains properties 'item' an html element representing the clicked item, and 'itemIndex', the index of the item clicked.
