A carousel panel displays its article heading and summary in the same way as standard article panels. It then displays a carousel of related articles.
You can create a carousel panel using either the Default template or List template - in both cases the related articles appear as slides in the carousel. However, if you use the List template, the first four articles that are configured to appear in the list via the list article extras (eg a related feature group) will be output as links above the carousel.
Carousel slides display their heading, first related image and their summary. A "See more" button appears on each carousel slide, taking the user to that article.
The carousel controls include left and right navigation to scroll through the slides, and if enabled, an auto-play button. Beneath the carousel is a numbered list of slides, which let you jump to a particular item.
The background of a carousel panel will either be a background image related to the carousel article, or a default colour supplied by the theme.
Carousel slides can be articles that use the List template, creating a list of articles in a single carousel slide.
Creating Carousel Panels
To create a carousel panel:
- Relate the "carousel" metadata value to an article using the Default or List template
- Relate one or more articles to it, which will become the slides in the carousel. These slides can use the Default or List template, and can have images and background images related to them
- Relate the article from step 1 to an article that uses the Panel template
Additional Carousel Configuration
Metadata related to the article that provides content for the carousel is used to control the carousel behaviour. The options are:
| Property | Values | Description |
|---|---|---|
| Allow play | true, false | Shows or hides the play button in the carousel controls |
| Play interval | 2000, 5000, 10000, 15000, 20000, 30000 | The interval (milliseconds) between slides when playing |
| Animate fade | true, false | If true slides will fade in. Really only noticeable if animate slide is false |
| Animate slide | true, false | If true the carousel transition will slide to the left. If false, one slide will simply be replaced with another |
| Is looping | true, false | Whether or not the slides loop |
| Slides to display | 1, 2, 3, 4, 5, 6 | The number of slides to display at once in the panel |
| Slides to move | 1, 2, 3, 4, 5, 6 | The number of slides to scroll through in each transition |
| Slides match height | true, false | Set as true so the panel matches the height of the tallest slide. If false the panel height will change to fit the content of each slide |
| Is swiper | true, false | If true the slides can be swiped left or right on a touch screen device or by clicking and dragging using a mouse |
| Layout order | controls-links-slides controls-slides-links links-controls-slides links-slides-controls slides-controls-links slides-links-controls | Set the order of the elements of the carousel. The default is for the controls (the arrows and play button) to appear at the top, then the slides, then the links to appear at the bottom |
Examples
These examples show a default article and a list article related to the Panel template (ie the article you are looking at right now uses the Panel template). Each of the related articles have the
The first article uses the Default template.
The second uses the List template.
In each carousel, the articles related to the default/list article make up the carousel items. The first three slides in the carousel use the Default template, the fourth uses the List template.
Standard Carousel
This panel uses the Default template and has the "carousel" panel type metadata related to it. The articles related to it appear in a carousel on the Panel template.
{0} list
![]()
Default Article in a Carousel 1
This is the first item in the carousel.
See more (Go to Default Article in a Carousel 1)![]()
Default Article in a Carousel 2
This is the second item in the carousel.
See more (Go to Default Article in a Carousel 2)![]()
Default Article in a Carousel 3
This is the third item in the carousel.
See more (Go to Default Article in a Carousel 3)List Article in a Carousel
This is the fourth item in the carousel.
See more (Go to List Article in a Carousel)![]()
Child Article in a Carousel Panel 1
Introductory text appears above the main page body content and provides a general introduction to the article. The text may appear in a contrasting style, depending upon your site's theme. It has a maximum length of 1,000 characters.![]()
Child Article in a Carousel Panel 2
Introductory text appears above the main page body content and provides a general introduction to the article. The text may appear in a contrasting style, depending upon your site's theme. It has a maximum length of 1,000 characters.
Combining Lists and Carousels
This panel uses the List template and has the "carousel" panel type metadata related to it. The articles related to this one appear in the carousel. Its child articles (which are configured to be part of the list) appear above the carousel.
Child Article 1
Child Article 2
Child Article 3
Child Article 4
{0} list
![]()
Default Article in a Carousel 1
This is the first item in the carousel.
See more (Go to Default Article in a Carousel 1)![]()
Default Article in a Carousel 2
This is the second item in the carousel.
See more (Go to Default Article in a Carousel 2)![]()
Default Article in a Carousel 3
This is the third item in the carousel.
See more (Go to Default Article in a Carousel 3)List Article in a Carousel
This is the fourth item in the carousel.
See more (Go to List Article in a Carousel)![]()
Child Article in a Carousel Panel 1
Introductory text appears above the main page body content and provides a general introduction to the article. The text may appear in a contrasting style, depending upon your site's theme. It has a maximum length of 1,000 characters.![]()
Child Article in a Carousel Panel 2
Introductory text appears above the main page body content and provides a general introduction to the article. The text may appear in a contrasting style, depending upon your site's theme. It has a maximum length of 1,000 characters.
Swiper Carousel
As well as the "carousel" panel type metadata, this article also has the "peeky-swiper" metadata related to it. The behaviour is modified using the carousel options metadata (eg the looping behaviour, number of slides to move at once).
{0} list
![]()
Default Article in a Swiper 1
This is the first item in the carousel.
See more (Go to Default Article in a Swiper 1)![]()
Default Article in a Swiper 2
This is the second item in the carousel.
See more (Go to Default Article in a Swiper 2)![]()
Default Article in a Swiper 3
This is the third item in the carousel.
See more (Go to Default Article in a Swiper 3)![]()
Default Article in a Swiper 4
This is the fourth item in the carousel.
See more (Go to Default Article in a Swiper 4)![]()
Default Article in a Swiper 5
This is the fifth item in the carousel.
See more (Go to Default Article in a Swiper 5)![]()
Default Article in a Swiper 6
This is the sixth item in the carousel.
See more (Go to Default Article in a Swiper 6)
Swiper Carousel - Minimal Styles
This article is exactly the same as the one above. The items in the carousel all have the "minimal" style applied, which makes them appear like they would in a List template or Search result. The final slide uses the List template.
{0} list
![]()
Default Article (minimal style) in a Swiper 1
This is the first item in the carousel.![]()
Default Article (minimal style) in a Swiper 2
This is the second item in the carousel.![]()
Default Article (minimal style) in a Swiper 3
This is the third item in the carousel.![]()
Default Article (minimal style) in a Swiper 4
This is the fourth item in the carousel.![]()
Default Article (minimal style) in a Swiper 5
This is the fifth item in the carousel.![]()
Default Article (minimal style) in a Swiper 6
This is the sixth item in the carousel.
