³ÉÈËÂÛ̳

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 separated class names to apply to the container.

Type

Optional

Yes

Space separated 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, it is good practice to indicate to the user how far they have scrolled through the carousel. We recommend the use of the pageNav parameter when allowing the user the loop to the begining of the carousel.

pageNav

Display navigational control next to the carousel.

Type

Default

false

Optional

Yes

scrollOnHold

Continue to scroll while button is held down.

Type

Default

true

Optional

Yes

size

Number of items the carousel displays at any one time

Type

Optional

Yes

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

slideOnScroll

Use sliding animation when scrolling continuously.

Type

Default

false

Optional

Yes

step

Number of items to scroll by. When the string 'page' is passed in the carousel will be set to scroll by the number of viewable items.

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

glow.dom.NodeList

Example

var myCarousel = new glow.widgets.Carousel("#carouselContainer");
glow.events.addListener(myCarousel, "itemClick", function(e) {
  alert(this.element) // returns the HTML element "#carouselContainer"
});

items

NodeList of the items within the carousel.

Type

glow.dom.NodeList

Example

var myCarousel = new glow.widgets.Carousel("ul#carouselContainer");
glow.events.addListener(myCarousel, "itemClick", function(e) {
  alert(this.items) // returns an array of <li /> elements in "ul#carouselContainer"
});

Methods

addItems

Used to add one or more new items to the carousel.

Synopsis

myCarousel.addItems(itemsToAdd, position);

Parameters

itemsToAdd

Type

glow.dom.NodeList | | Selector

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.

Example

var myCarousel = new glow.widgets.Carousel("ul#carouselContainer"); // This <ul> has 3 <li> children
alert(myCarousel.items); // returns 3 items
myCarousel.addItems("ul#anotherList li"); // ul#anotherList has 2 <li> children
alert(myCarousel.items); // returns 5 items

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.

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.

Example

var myCarousel = new glow.widgets.Carousel("ul#carouselContainer");
myCarousel.moveNext();     // Move forward to the 2nd item.
myCarousel.moveBy(3,true); // Move forward 3 from the current item to the 5th item

moveTo

Scroll to a specified position in the carousel.

Synopsis

myCarousel.moveTo(targetItem, animate);

Parameters

targetItem

Type

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

animate

Type

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.

Example

var myCarousel = new glow.widgets.Carousel("ul#carouselContainer");
myCarousel.moveTo(3,true); // Move to the 3rd item.

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

Example

var myCarousel = new glow.widgets.Carousel("ul#carouselContainer");
alert(myCarousel.items); //returns array with a length of 5
myCarousel.removeItem(4);
alert(myCarousel.items); //returns array with a length of 4

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.

Example

var myCarousel = new glow.widgets.Carousel("ul#carouselContainer"{
  size: 3
});
myCarousel.moveTo(4);
alert(myCarousel.visibleIndexes()); // returns [4, 5, 6]

visibleItems

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

Synopsis

myCarousel.visibleItems();

Returns

glow.dom.NodeList

Example

var myCarousel = new glow.widgets.Carousel("ul#carouselContainer"{
  size: 3
});
myCarousel.moveTo(4);
alert(myCarousel.visibleItems()); // returns nodeList with 3 items starting from the carousel's 4th item

Events

addItem

One or more items about to be added to the carousel.

Synopsis

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

Arguments

event

Type

glow.events.Event

Event Object

items

NodeList of items being added

Type

glow.dom.NodeList

NodeList of items being added

Description

Canceling this event stops the items being added.

removeItem

Item about to be removed.

Synopsis

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

Arguments

event

Type

glow.events.Event

Event Object

item

Represents the item to be removed

Type

glow.dom.NodeList

Represents the item to be removed

itemIndex

Index of the item to be removed

Type

Index of the item to be removed

Description

Canceling this event results in the item not being removed.

scroll

Fired before scrolling.

Synopsis

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

Arguments

event

Type

glow.events.Event

Event Object

currentPosition

Carousel's current position

Type

Carousel's current position

afterScroll

Fired after scrolling animation is complete.

Synopsis

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

Arguments

event

Type

glow.events.Event

Event Object

position

The carousel's new position

Type

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

Type

glow.events.Event

Event Object

item

Represents the item clicked

Type

glow.dom.NodeList

Represents the item clicked

itemIndex

Index of the item clicked

Type

Index of the item clicked

Description

The event contains properties 'item' an html element representing the clicked item, and 'itemIndex', the index of the item clicked.