Â鶹Éç

Overview

The glow.widgets.Carousel widget allows you to create a scrollable group of items from a list.

Using the Carousel widget

Your carousel can be made up of an ordered or unordered list element or a collection of other block level elements. The carousel will assume that all items have the same dimensions, based on the width and height of the first item.

In the example below, a carousel is created using an ordered list. This will create a carousel with the default options.

CSS

<style type="text/css">
ol#carousel {
	height:81px;
	overflow:auto;
	margin:0;
}
ol#carousel li {
	background:#fff;
	float:left;
	height:73px;
	margin:4px;
	list-style:none;
	text-align:center;
}
</style>

<ol id="carousel">
	<li><img src="/staticarchive/752f17a4287fbd369b7bf20dfc2b26529c6e4444.gif" alt="Â鶹Éç One" /></li>
	<li><img src="/staticarchive/a4860ca49a06484a6713729ad60f6e7bed464552.gif" alt="Â鶹Éç Two" /></li>
	<li><img src="/staticarchive/b5bea0f88cae66c19ac5c6eac4a18f122c9b1c7b.gif" alt="Â鶹Éç Three" /></li>
	<li><img src="/staticarchive/a9722520cc84c9182ebbb4392be58b8e200f349f.gif" alt="Â鶹Éç Four" /></li>
	<li><img src="/staticarchive/3b2a4e2455daf7413a129b5861c82ebcafce749d.gif" alt="Â鶹Éç HD" /></li>
	<li><img src="/staticarchive/c94ff34b0a3f937588bdd19bb198cacacb436785.gif" alt="CÂ鶹Éç" /></li>
	<li><img src="/staticarchive/4dd5e571190d9c55a9e55e4b94caf4bf261ad61d.gif" alt="CBeebies" /></li>
	<li><img src="/staticarchive/178e1ca89b6ee7d0965817490a8093295665b3b5.gif" alt="Â鶹Éç News" /></li>
	<li><img src="/staticarchive/06eb9ae322664b1c684d07e0c5d6e6c91174cbcf.gif" alt="Â鶹Éç Parliament" /></li>
	<li><img src="/staticarchive/96ff1dd06dd00a9d38959cae6ddd24157aa940f2.gif" alt="Radio 1" /></li>
	<li><img src="/staticarchive/a8d686995ab4bc90b9faebd69f9a47c57afcc036.gif" alt="Radio 2" /></li>
	<li><img src="/staticarchive/337cf27c20ea3b3c7116f0456aab786773cb37b4.gif" alt="Radio 3" /></li>
	<li><img src="/staticarchive/562dfd5262896884c15a0927d0fb2d2291d580d6.gif" alt="Radio 4" /></li>
	<li><img src="/staticarchive/1c2f77dbe0b7ff493df6013ab84f9144c8749e9f.gif" alt="Five Live" /></li>
	<li><img src="/staticarchive/d5b741214cda67c20eb35774eed27f7ce1bc9c0e.gif" alt="6Music" /></li>
	<li><img src="/staticarchive/3de574cf3a713b3e7d6a396c743c3f4d2398dadb.gif" alt="Â鶹Éç 7" /></li>
</ol>

JavaScript

var carousel = new glow.widgets.Carousel("#carousel");

Common Carousel Options

The second argument in the Carousel constructor is an options object, the most common properties of which are size, step, loop and theme.

By default the carousel will expand horizontally to fill the available space, this can be overidden with the size option. If a size is provided, the dimensions of the carousel's viewing area will be set to exactly fit the specified number of items. e.g. Setting the size to 4 will cause the carousel to display 4 items at any one time.

The step option can be used to control how far the carousel will move on each scroll. By default the carousel will move by the width of one item, however the step option can be used to create a "paged" carousel, by setting the size and step to the same value.

The carousel will, by default, stop when it scrolls to the end of the contained items. The loop option can be used to prevent this and continue scrolling through the items from the beginning.

The carousel includes two themes, "light" and "dark", which can be used in both horizontal and vertical orientations.

This example uses the same HTML and CSS, but adds the loop, size, step and theme options.

JavaScript

carousel2 = new glow.widgets.Carousel("#carousel2",{
	loop: true,
	size: 4,
	step: 4,
	theme: "dark"
});

Templating: Customizing the design of the Carousel

Classes are provided on the elements which build up the carousel, and can be used to customize the style of the widget.

glowVERSION-carousel

The container element of the carousel. Where VERSION is the glow version number without the dots. e.g. glow120-carousel. This should not be used in your custom styles as it will change between minor versions. Instead, give your carousel an ID, and target styles at it using that.

carousel-nav, carousel-prev & carousel-next

Navigation elements. carousel-nav refers to both forward and back buttons. carousel-prev and carousel-next refer to the individual buttons.

carousel-window

This element acts as a viewing window on the items, hiding those not in view. The background colour can also be set on this element.

carousel-content

Parent element of the carousel items.

carousel-item

Class name applied to each item in the carousel.

Example

In this example the carousel buttons are layered over the top of the previous and next items. In order to ensure that the previous item is always visible, the viewing window is moved 103px (the width of one item) to the left. The carousel is then moved back one item immediatly after it is created in order to place the first item in the centre.

CSS

ol#carousel3 {
	height:162px;
}
ol#carousel3 li {
	width:200px;
	height:146px;
	background:#efefef;
	text-align:center;
}
ol#carousel3 img {
	margin-top:30px;
	padding:0;
}
.carousel3 {
	width:416px;
	height:154px;
	position:relative;
	overflow:hidden;
}
div.carousel3 .carousel-light .carousel-window {
	left:-103px; // Shift the viewing window one item to the left
	background:transparent;
}
.carousel3 #layeredCarousel {
	width:416px;
}
.carousel3 a.carousel-nav {
	width:0;
	overflow:visible;
	position:static;
	height:154px;
}
.carousel3 a.carousel-nav .carousel-label,
.carousel3 a.carousel-nav .carousel-background,
.carousel3 a.carousel-nav .carousel-top,
.carousel3 a.carousel-nav .carousel-bottom {
	visibility:hidden;
}
.carousel3 a.carousel-prev .carousel-arrow {
	position:absolute;
	left:10px;
	height:154px;
	z-index:2;
}
.carousel3 a.carousel-next .carousel-arrow {
	position:absolute;
	left:80px;
	height:154px;
	z-index:2;
}
.carousel3 a.carousel-nav {
	position:absolute;
	display:block;
	top:0;
	height:154px;
	width:104px;
	z-index:1;
}
.carousel3 div#layeredCarousel a.carousel-prev {
	background:transparent url(/staticarchive/e46f56557f58b4184aa8c5336c9697e4111c17a0.png) top left repeat-y;
	_background:none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/staticarchive/e46f56557f58b4184aa8c5336c9697e4111c17a0.png",sizingMethod=scale);
	_zoom:1;
	left:0;
}
.carousel3 div#layeredCarousel a.carousel-next {
	background:transparent url(/staticarchive/7b55d2412ede7cf8d1d11767ba6261cf26dd5577.png) top right repeat-y;
	_background:none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/staticarchive/7b55d2412ede7cf8d1d11767ba6261cf26dd5577.png",sizingMethod=scale);
	_zoom:1;
	right:0;
}
.carousel3 a.carousel-nav span {
	display:none;
}
.carousel3 a.carousel-nav span.carousel-arrow {
	display:block;
}

JavaScript

var carousel3 = new glow.widgets.Carousel("#carousel3",{
	loop: true,
	size: 3
});
// Move back one item in order to display first item in the centre
carousel3.moveBy(-1,false);