Component Demo


Landscape carousel with 3 cards

To configure the carousel

  1. Select the carousel component and click the "wrench icon" in the toolbar

To configure a single card in a carousel

  1. Select the carousel component and click the "select panel icon" next to the wrench icon
  2. Select the card you would like to edit. The carousel will animate to the card you have selected
  3. The selected card is now editable

Landscape carousel with 1 card

When a carousel only contains 1 card, it is not scrollable and controls are disabled

Portrait carousel with 6 slides

A carousel component with the portrait display mode

To change the display mode of a carousel:

  1. Select the carousel component
  2. Click the wrench from the toolbar
  3. Select the layout tab
  4. Change the display mode

Portrait carousel with 3 slides

On mobile, a card takes the full width and users should be able to swipe left and right.
On larger screens, all slides are in view so controls are disabled.

Landscape carousel

This is landscape carousel inside a section wrapper

Portrait carousel

This is portrait carousel inside a section wrapper

Examples with realistic content

The carousels below are based on the designs


What Qatar has to offer?

Explore Qatar the way you like

What's happening?

Discover our events & festivals