Please turn on JavaScript. To find out how to do this visit the WebWise JavaScript guide.

Scroll through a list of items

Widgets must be called in a glow.onReady() call.

Further Info & Examples

Constructor

new glow.widgets.Carousel(container, opts)

Parameters

container
Type
glow.dom.NodeList

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, 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
Boolean
Default
false
Optional
Yes
scrollOnHold

Continue to scroll while button is held down.

Type
Boolean
Default
true
Optional
Yes
size

Number of items the carousel displays at any one time

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. When the string 'page' is passed in the carousel will be set to scroll by the number of viewable items.

Type
Number | String
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
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 | 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.

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
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.

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
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.

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
Number

A numeric index of the item to remove.

Returns

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

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

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
Number

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
Number

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
Number

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
Number

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.

Documentation generated by JsDoc Toolkit 2.1.0 on Mon Jul 20 2009 14:55:31 GMT+0100 (BST)

BBC © 2014 The BBC is not responsible for the content of external sites. Read more.

This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.