widget:carousel

Purpose

Defines a Carousel widget that displays a subset of a list of items. The contained li elements have a restricted content model, when used in a carousel. The li does not need to be enclosed in the nl, ol, or ul elements.

Note:

The Carousel widget should be bound to a layout policy to separate its content from its container. If no layout is specified, then it will behave in the same way as the body element, with an implicit layout containing a single region.

Contained by

Contains

Attribute groups

Event

Event Description
page-changed This 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.

Example

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

Related topics