Creating a carousel

The Carousel widget displays a subset of a list of content items for a given period of time. At the end of the time period the displayed subset changes. The Carousel widget allows users to select an item from a list that is longer than can be displayed on the device.

Visual appearance

The item display is cyclical, so when all items have been displayed it starts again at the beginning. For example, a carousel displays 4 items out of a list of 10 items. Initially it displays items 1-4 from the list. After a defined period of time, it changes to display items 5 to 8. After a further period of time it changes to display items 9-10 followed by 1-2. It continues to cycle through the content indefinitely.

User interactions

When user selects the Carousel widget itself, or a focusable item being displayed inside it the transitions are suspended, and resume again when the user selects something outside of the widget. If the user selects on a focusable item, then the linked object is opened.

XDIME 2 elements

You use the widget:carousel element to define a carousel. Inside the carousel, a li element contains links to the items to be displayed. This list does not need to be enclosed in the usual list containers; nl, ol, or ul.

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:widget="http://www.volantis.com/xmlns/2006/05/widget">
  <head>
    <title>widget:carousel</title>
    <style type="text/css">
      widget|carousel {
        height: 6em;
        padding: 4px;
        mcs-transition-interval: 3s;
        mcs-effect-style: wipe-top;
        mcs-effect-duration: 2s;
      }
      widget|carousel:mcs-concealed {
        mcs-effect-style: wipe-top;
        mcs-effect-duration: 2s;
      }
    </style>
    <widget:handler event="my-carousel#page-changed" action="my-popup#show"/>
  </head>
  <body>
    <widget:carousel id="my-carousel">
      <li><a href="http://www.ankara-bel.gov.tr">Ankara</a></li>
      <li><a href="http://www.berlin.de">Berlin</a></li>
      <li><a href="http://www.bratislava.sk">Bratislava</a></li>
      <li><a href="http://www.budapest.hu">Budapest</a></li>
      <li><a href="http://www.pmb.ro">Bucharest</a></li>
      <li><a href="http://www.krakow.pl">Cracow</a></li>
      <li><a href="http://www.ljubljana.si">Ljubljana</a></li>
      <li><a href="http://www.nicosia.org.cy">Nicosia</a></li>
      <li><a href="http://www.prague-city.cz">Prague</a></li>
      <li><a href="http://www.rcc.lv">Riga</a></li>
      <li><a href="http://www.sofia.bg">Sofia</a></li>
      <li><a href="http://www.tallinn.ee">Tallinn</a></li>
      <li><a href="http://www.tirana.gov.al">Tirana</a></li>
      <li><a href="http://www.cityofvalletta.org">Valletta</a></li>
      <li><a href="http://www.wien.gv.at/">Vienna</a></li>
      <li><a href="http://www.vilnius.lt">Vilnius</a></li>
      <li><a href="http://www.zagreb.hr">Zagreb</a></li>
    </widget:carousel>
    <widget:popup id="my-popup">
      <p>Carousel content has changed.</p>
      <widget:dismiss>dismiss</widget:dismiss>
    </widget:popup>
  </body>
</html>

The page-changed event is sent whenever the displayed subset of items changes. If there is a transition effect associated with the change of the content, then it will be sent when the effect completes.

You can refresh the widget contents periodically, at intervals specified in the widget:refresh element - see Load, refresh and fetch actions for details.

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
  xmlns:template="http://www.volantis.com/xmlns/marlin-template"
  xmlns:widget="http://www.volantis.com/xmlns/2006/05/widget">
  <head>
    <title>Carousel Widget with AJAX</title>
    <link rel="mcs:theme" href="/themes/main.mthm"/>
    <link rel="mcs:layout" href="/layouts/main.mlyt"/>
    <style type="text/css">
      #myWeatherCarousel {
        mcs-effect-style: slide-right;
        mcs-effect-duration: 5s;
        height: 5em;
        mcs-transition-interval: 8s;
        padding: 4px;
      }
      #myWeatherCarousel:mcs-concealed{
        mcs-effect-style: slide-left;
        mcs-effect-duration: 5s;
      }
    </style>
  </head>
  <body>
    <template:apply href="templates/demo-main.xdtpl">
      <template:binding name="title" value="Carousel w/AJAX"/>
      <template:binding name="content">
        <template:complexValue>
          <widget:carousel id="myWeatherCarousel" class="widget">
            <widget:refresh src="service/carousel?id=myWeatherCarousel"
              interval="30"/>
            <li>The Carousel Widget can be configured </li>
            <li>to periodically refresh its content</li>
            <li>by fetching data, such as weather conditions,</li>
            <li>from a web service...</li>
          </widget:carousel>
        </template:complexValue>
      </template:binding>
    </template:apply>
  </body>
</html>

The carousel:response element replaces existing content. In the following example the styles for each list item are specified in the response:link reference to /main.mthm theme policy. See Widget response structure for more information.

<?xml version="1.0" encoding="UTF-8"?>
<response:response xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
  xmlns:response="http://www.volantis.com/xmlns/2006/05/widget/response">
  <response:head>
    <response:link rel="mcs:theme" href="/main.mthm"/>
  </response:head>
  <response:body>
    <response:carousel id="myWeatherCarousel">
      <li><a href="http://www.budapest.hu">Budapest</a>: 22°C, rain and wind</li>
      <li><a href="http://www.prague-city.cz">Prague</a>: 8°C, rain</li>
    </response:carousel>
  </response:body>
</response:response>

Note:

The Carousel widget should have a layout associated with it to separate its content from its container. If none is specified then it will behave the same as the body element, which is an implicit layout containing a single region.

Styling the widget

You can use the mcs-transition-interval property to control the duration of the content replacement. The default value is one second.

A carousel may take the focus, even if it does not contain any focusable elements, if you use the focus pseudo-class on the element. The default value for this pseudo-class is 'accept'. If you specify 'ignore', users will not be able to action carousel elements unless they can take the focus.

Non-client fallback

If a device does not support the Carousel widget then it simply displays all the items at once, and they cannot be updated from the server.