Class glow.ui.Carousel

Extends glow.ui.Widget.

Defined in: ui.js.

Class Summary
Constructor Attributes	Constructor Name and Description
	glow.ui.Carousel(itemContainer, opts) Create a pane of elements that scroll from one to another.

Field Summary
Field Attributes	Field Name and Description
	itemContainer Parent element of the carousel items.
	items Carousel items.

Fields borrowed from class glow.ui.Widget:: container, content, phase

Method Summary
Method Attributes	Method Name and Description
	addPageNav(opts) Add page navigation to the carousel.
	destroy() Remove listeners and styles from this instance.
	moveTo(itemIndex, animate) Move the items so a given index is in the spotlight.
	next() Move to the next page/item
	prev() Move to the previous page/item
	spotlightIndexes() Gets an array of spotlighted indexes.
	spotlightItems() Get the currently spotlighted items.

Methods borrowed from class glow.ui.Widget:: disabled
Methods borrowed from class glow.events.Target:: detach, fire, on

Event Summary
Event Attributes	Event Name and Description
	afterMove(event) Fires when the carousel has finished moving.
	move(event) Fires when the carousel is about to move.
	select(event) Fires when a carousel item is selected.

Events borrowed from class glow.ui.Widget:: destroy, disable

Class Detail

glow.ui.Carousel(itemContainer, opts)

Create a pane of elements that scroll from one to another.

			// This creates a carousel out of HTML like...
			// 
			//   
			//     
			//       
			//	   
			//   
			//   ...more list items like above...
			var myCarousel = new glow.ui.Carousel('#carouselItems', {
				loop: true,
				page: true,
			});

			// Make a carousel of thumbnails, which show the full image when clicked.
			// Carousel items look like this...
			// 
			//   
			//     
			//   
			// 
			var fullImage = glow('#fullImage'),
				myCarousel = new glow.ui.Carousel('#carouselItems', {
					spotlight: 6
				}).addPageNav('belowCenter').on('select', function(e) {
					fullImage.prop( 'src', e.item.get('a').prop('href') );
					return false;
				});

Parameters:
{glow.NodeList|selector|HTMLElement} itemContainer: Container of the carousel items. The direct children of this item will be treated as carousel items. They will be positioned next to each other horizontally. Each item takes up the same horizontal space, equal to the width of the largest item (including padding and border) + the largest of its horizontal margins (as set in CSS). The height of the container will be equal to the height of the largest item (including padding and border) + the total of its vertical margins.
{object} opts Optional: Options
{number} opts.duration Optional, Default: 0.2: Duration of scrolling animations in seconds.
{string|function} opts.tween Optional, Default: 'easeBoth': Tween to use for animations. This can be a property name of glow.tweens or a tweening function.
{boolean|number} opts.page Optional, Default: false: Move a whole page at a time. If 'true', the page size will be the spotlight size, but you can also set this to be an explicit number of items. Space will be added to the end of the carousel so pages stay in sync. If 'false' or 1, the carousel moves one item at a time.
{boolean} opts.loop Optional, Default: false: Loop the carousel from the last item to the first.
{number} opts.spotlight Optional: The number of items to treat as main spotlighted items. A carousel may be wide enough to display 2 whole items, but setting this to 1 will result in the spotlight item sitting in the middle, with half of the previous item appearing before, and half the next item appearing after. By default, this is the largest number of whole items that can exist in the width of the container, allowing room for next & previous buttons. Any remaining width will be used to partially show the previous/next item beneath the next & previous buttons.

Field Detail

{glow.NodeList} itemContainer

Parent element of the carousel items.

{glow.NodeList} items

Carousel items.

Method Detail

addPageNav(opts)

Add page navigation to the carousel. The page navigation show the user which position they are viewing within the carousel.

			new glow.ui.Carousel('#carouselContainer').addPageNav({
				position: 'belowMiddle',
				useNumbers: true
			});

Parameters:

{Object} opts Optional

Options object.

{string|selector|HTMLElement} opts.position Optional, Default: 'belowLast'

The position of the page navigation. This can be a CSS selector pointing to an element, or one of the following shortcuts:

belowLast: Display the nav beneath the last spotlight item
belowNext: Display the nav beneath the next button
belowMiddle: Display the nav beneath the carousel, centred
aboveLast: Display the nav above the last spotlight item
aboveNext: Display the nav above the next button
aboveMiddle: Display the nav above the carousel, centred

{boolean} opts.useNumbers Optional, Default: false

Display as numbers rather than blocks.

Returns:: this

destroy()

Remove listeners and styles from this instance. Carousel items will not be destroyed.

Returns:: undefined

moveTo(itemIndex, animate)

Move the items so a given index is in the spotlight.

Parameters:
{number} itemIndex: Item index to move to.
{boolean} animate Optional, Default: true: Transition to the item. If false, the carousel will switch to the new index.

Returns:: this

next()

Move to the next page/item

Returns:: this

prev()

Move to the previous page/item

Returns:: this

{number[]} spotlightIndexes()

Gets an array of spotlighted indexes. These are the indexes of the nodes within glow.ui.Carousel#items.

Returns:: {number[]}

{glow.NodeList} spotlightItems()

Get the currently spotlighted items.

Returns:: {glow.NodeList}

Event Detail

afterMove(event)

Fires when the carousel has finished moving. Canceling this event prevents the carousel from moving. This will not fire for repeated move actions. Ie, after #start is called this will not fire until the carousel reached an end point or when it comes to rest after #stop is called.

			// double the amount a carousel will move by
			myCarousel.on('afterMove', function(e) {
				// show content related to this.spotlightIitems()[0]
			});

Parameters:
{glow.events.Event} event: Event Object

move(event)

Fires when the carousel is about to move. Canceling this event prevents the carousel from moving. This will fire for repeated move actions. Ie, this will fire many times while the mouse button is held on one of the arrows.

Parameters:
{glow.events.Event} event: Event Object
{number} event.moveBy: The number of items we're moving by. This will be positive for forward movements and negative for backward movements. You can get the current index via `myCarousel.spotlightIndexes()[0]`.

select(event)

Fires when a carousel item is selected. Items are selected by clicking, or pressing enter when a child is in the spotlight. Canceling this event prevents the default click/key action.

Parameters:
{glow.events.Event} event: Event Object
{glow.NodeList} event.item: Item selected
{number} event.itemIndex: The index of the selected item in glow.ui.Carousel#items.

Classes

Class glow.ui.Carousel