Â鶹Éç

Constructor

new glow.widgets.Carousel(container, opts)

Parameters

container

Type

glow.dom.NodeList

The container of items to display as a carousel.

opts

Type

Options object

animDuration

Duration of animation in seconds.

Type

Default

0.2

Optional

Yes

animTween

A Glow tween function to animate scrolling.

Type

Default

glow.tweens.easeBoth()

Optional

Yes

className

List of additional space seperated class names to apply to the container.

Type

Optional

Yes

Space seperated values.

id

An ID to apply to the container element.

Type

Optional

Yes

loop

True if the carousel should loop when it gets to the end.

Type

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.

scrollOnHold

Continue to scroll while button is held down

Type

Default

true

Optional

Yes

size

Size carousel to display specified number of items

Type

Optional

Yes

By default, the carousel will fill all available horizontal (or vertical) space.

step

Number of items to scroll by.

Type

Default

1

Optional

Yes

theme

Visual Theme

Type

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

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

A NodeList of items to add to the carousel.

position

Type

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

The number of items to move by. Positive numbers move forward, negative move backwards.

animate

Type

Set to false to disable animation.

moveTo

Scroll to a specified position in the carousel.

Synopsis

myCarousel.moveTo(targetItem, Set);

Parameters

targetItem

Type

The index of the item to appear in the leftmost visible position of the carousel.

Set

Type

to false to disable animation.

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

A numeric index of the item to remove.

Returns

glow.dom.NodeList

Removed item.

visibleIndexes

Returns an array of numeric indexes of the currently visable items in the carousel.

Synopsis

myCarousel.visibleIndexes();

Returns

Array of indexes of the currently visible items.

visibleItems

Returns a NodeList of all items currently visible in the carousel.

Synopsis

myCarousel.visibleItems();

Returns

glow.dom.NodeList

NodeList of all currently visible items.

Events

addItem

Fired before event, can be cancelled, new item passed in.

Synopsis

glow.events.addListener(myCarousel, "addItem", function(event) {
    // ...
});

Arguments

event

Type

glow.events.Event

removeItem

Fired before an item is removed, can be cancelled, item passed in.

Synopsis

glow.events.addListener(myCarousel, "removeItem", function(event) {
    // ...
});

Arguments

event

Type

glow.events.Event

scroll

Fired before scroll. Current position and new position passed in.

Synopsis

glow.events.addListener(myCarousel, "scroll", function(event) {
    // ...
});

Arguments

event

Type

glow.events.Event

Description

The event object contains the properties 'currentPosition' and 'newPosition' containing the carousel's old and new positions respectively.

afterScroll

Fired after scrolling animation is complete. New position passed in.

Synopsis

glow.events.addListener(myCarousel, "afterScroll", function(event) {
    // ...
});

Arguments

event

Type

glow.events.Event

Description

The event object contains the property 'position' containing the carousel's new position.

itemClick

Fired when an item is clicked. Item index passed in.

Synopsis

glow.events.addListener(myCarousel, "itemClick", function(event) {
    // ...
});

Arguments

event

Type

glow.events.Event