Version 1.5Carousel Widget

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.

HTML / CSS

<style type="text/css">
ol#carousel li {margin:4px;
}
</style> <ol id="carousel">
<li><img src="/staticarchive/752f17a4287fbd369b7bf20dfc2b26529c6e4444.gif" alt="BBC One" /></li>
<li><img src="/staticarchive/a4860ca49a06484a6713729ad60f6e7bed464552.gif" alt="BBC Two" /></li>
<li><img src="/staticarchive/b5bea0f88cae66c19ac5c6eac4a18f122c9b1c7b.gif" alt="BBC Three" /></li>
<li><img src="/staticarchive/a9722520cc84c9182ebbb4392be58b8e200f349f.gif" alt="BBC Four" /></li>
<li><img src="/staticarchive/3b2a4e2455daf7413a129b5861c82ebcafce749d.gif" alt="BBC HD" /></li>
<li><img src="/staticarchive/c94ff34b0a3f937588bdd19bb198cacacb436785.gif" alt="CBBC" /></li>
<li><img src="/staticarchive/4dd5e571190d9c55a9e55e4b94caf4bf261ad61d.gif" alt="CBeebies" /></li>
<li><img src="/staticarchive/178e1ca89b6ee7d0965817490a8093295665b3b5.gif" alt="BBC News" /></li>
<li><img src="/staticarchive/06eb9ae322664b1c684d07e0c5d6e6c91174cbcf.gif" alt="BBC 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="BBC 7" /></li>
</ol>

JavaScript

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

Common 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. For example, 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

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

Scrolling options

There are additional options that govern the scrolling behaviour of the carousel. Firstly there is scrollOnHold, which specifies whether the carousel should continue to scroll through items if the user keeps their mousedown on the navigation buttons. This is set to true by default.

If you want the carousel to use a smoother animation for scrollOnHold, then set the slideOnScroll option to true, this will cause the carousel to scroll continuously with a linear tween as the mouse is held down.

To change the animation style of single click scrolls, you can tweak the animDuration and animTween options. If you are using slideOnScroll, these settings will only be used for the first scroll animation.

The example below shows a carousel with slideOnScroll set to true, and a different animation duration and tween.

JavaScript

var carousel3 = new glow.widgets.Carousel("#carousel3",{ slideOnScroll: true, animDuration: .25, animTween: glow.tweens.easeIn(), loop: true, size: 4
});

Navigation options

If you are creating a looping carousel, or a carousel with a large number of items, you may want to allow users to see their current position in the carousel. You can do this easily by adding the pageNav constructor option, which adds a new navigation bar and removes the standard arrow buttons.

JavaScript

var carousel4 = new glow.widgets.Carousel("#carousel4",{ loop: true, size: 4, step: 4, pageNav: true
});

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. The carousel is moved back one item immediately after it is created in order to place the first item in the centre.

CSS

/* Set the width of the carousel and the view window to be the same */
div.carousel5 div#layeredCarousel,
div.carousel5 div.carousel-light div.carousel-window { width: 360px !important;
} /* Set the prev button to be absolutely positioned to the left of the carousel */
div.carousel5 div.carousel-light 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); left: 0; position: absolute; width: 104px;
} /* Set the next button to be absolutely positioned to the right of the carousel */
div.carousel5 div.carousel-light 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); position: absolute; right: 0; width: 104px;
}
.carousel5 a.carousel-next .carousel-arrow { left: 84px;
} /* Because the carousel buttons use transparent images, we need to hide the child elements of the links */
.carousel5 a.carousel-nav .carousel-label,
.carousel5 a.carousel-nav .carousel-background,
.carousel5 a.carousel-nav .carousel-top,
.carousel5 a.carousel-nav .carousel-bottom { visibility: hidden;
} /* Pad out the list elements */
ol#carousel5 li { margin: 20px 10px;
}

JavaScript

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

Vertical Carousel

A vertical carousel can be created by setting the parameter 'vertical' to 'true':

JavaScript

var carousel6 = new glow.widgets.Carousel("#carousel6",{ vertical: true, size: 1
});