ThemeBuilder for Confluence Server and DC

Carousel - Container and Page

These macros are used together to create a rotating carousel of images and links. Attach the required images to the page, or add as a ThemeBuilder resource, before adding the carousel macros. We recommend using images that are 966 pixels wide by 300 pixels high.

Name

Description

Categories

static-carousel

Container for a group of carousel pages

confluence-content

carousel-page

Defines a carousel page

confluence-content

Usage

Instructions

  1. Click Create in the desired page.

  2. Select Blank page, then click Create.

  3. Name this child page 'Carousel', then Save.

    carousel gif 01
  4. In your new page, click the Tools dropdown menu.

  5. Select Attachments.

  6. Add desired image files for the carousel.

  7. Once the images are uploaded, navigate back to the 'Carousel' child page by following the breadcrumb link in the top left portion of the page.

    carousel gif 02
  8. Next, click Edit.

  9. In the editor, click the '+' (Insert More Content) menu.

  10. Select Other Macros from the dropdown list.

  11. Search 'carousel' in the pop-out menu.

  12. Select the Carousel Container macro.

  13. Set desired parameters and click Insert.

    carousel gif 03
  14. Inside the Carousel Container macro, once more click the '+', and then Other Macros.

  15. Search 'carousel' once more, this time select Carousel Page.

  16. Set required and desired parameters, then click Insert.

    carousel gif 04
  17. To continue adding images to your carousel, return to steps 14-16.

Result

carousel gif 05
The static-carousel macro must be used to wrap carousel-page macros.

Storage Format

`<ac:macro ac:name="static-carousel"> +
<ac:parameter ac:name="parameter">value</ac:parameter> +
<ac:rich-text-body> +
<ac:macro ac:name="carousel-page"> +
<ac:parameter ac:name="parameter">value</ac:parameter> +
</ac:macro> +
...repeat for number of carousel items +
</ac:rich-text-body> +
</ac:macro>`

Wiki Markup

`{static-carousel:parameter=value} +
{carousel-page:parameter=value} +
...repeat for number of carousel items +
{static-carousel}`
Parameter Name Description Type Default Required

count

Count

Restricts the number of carousel-pages displayed

string

error

speed

Speed

The speed of the carousel (in seconds)

string

7

error

flag

Flag

A list of flags, one of which must be defined for the content to be displayed

string

error

notflag

Not Flag

A list of flags which must not be defined for the content to be displayed

string

error

Parameter Name Description Type Default Required

target

Link Target

The page that is being linked to

confluence-content

check

image

Background Image

The image that should be shown in the carousel - can be attached to the page or a ThemeBuilder resource

string

check

heading

Heading Text

The heading text

string

check

linktext

Link Text

The text for the link to the page, or blank to use the page name

string

Linked Page Name

error

tabtext

Tab Text

The text shown in the tab, or blank to use the page name

string

Linked Page Name

error

alt-text

Alt Text

The text that describes the image to accessible technology e.g. screenreaders

string

error

flag

Flag

A list of flags, one of which must be defined for the content to be displayed

string

error

notflag

Not Flag

A list of flags which must not be defined for the content to be displayed

string

error

Parameter Name Description Type Default Required

spaces

Spaces

Only pages within these spaces will be checked. Also accepts @all, @global, @personal & @favourite.

spacekey

@all

error

parents

Parents

A comma separated list of parent pages in SPACEKEY:pagename format whose children will be checked.

confluence-content

all pages

error

labels

Labels

Only pages with one of these labels will be checked.

string

any label

error

authors

Authors

Only pages by these authors (users or groups) will be checked. Also accepts @creator, @owner & @self.

string

all users

error

sort

Sort

The order to sort the pages in

enum

creation

error

count

Count

Restricts the number of carousel-pages displayed

string

error

selected

Initial Selection

Sets the carousel-page that should be selected by default

string

error

speed

Speed

The speed of the carousel (in seconds)

string

7

error

flag

com.adaptavist.confluence.theme.engine.dynamic-carousel.param.flag.label

com.adaptavist.confluence.theme.engine.dynamic-carousel.param.flag.desc

string

error

notflag

com.adaptavist.confluence.theme.engine.dynamic-carousel.param.notflag.label

com.adaptavist.confluence.theme.engine.dynamic-carousel.param.notflag.desc

string

error

Example

When importing Carousels between pages or ThemeBuilder panels, always ensure the full space:pagename is used, e.g. AD:Adaptavist Documentation Home.
<ac:macro ac:name="static-carousel">
<ac:parameter ac:name="count">2</ac:parameter>
<ac:rich-text-body>
<ac:macro ac:name="carousel-page">
<ac:parameter ac:name="target">AD:Adaptavist Documentation Home</ac:parameter>
<ac:parameter ac:name="image">biggar-bank.jpg</ac:parameter>
<ac:parameter ac:name="heading">Biggar Bank</ac:parameter>
<ac:parameter ac:name="alt-text">A rocky beach</ac:parameter> </ac:macro>
<ac:macro ac:name="carousel-page">
<ac:parameter ac:name="linktext">My Link Text</ac:parameter>
<ac:parameter ac:name="target">ds:Plugins for Documentation</ac:parameter>
<ac:parameter ac:name="image">blackrock-city.jpg</ac:parameter>
<ac:parameter ac:name="tabtext">And Tab Text</ac:parameter>
<ac:parameter ac:name="heading">Heading Two is longer so it wraps on to the next line</ac:parameter>
</ac:macro>
</ac:rich-text-body>
</ac:macro>
{static-carousel:count=2}
{carousel-page:target=AD:Adaptavist Documentation Home|image=biggar-bank.jpg|heading=Biggar Bank|alt-text=A rocky beach}
{carousel-page:target=ds:Plugins for Documentation|image=blackrock-city.jpg|heading=Heading Two is longer so it wraps on to the next line|linktext=My Link Text|tabtext=And Tab Text}
{static-carousel}

The background and text colours of the boxes on the carousel can be changed using this CSS - change the hex codes to your required colour scheme.

.adpt-carousel .carousel-text {
background: #3E3E3E;
color: #fff;
}

.adpt-carousel .carousel-text > p {
    background: #1078BF;
    color: #fff;
}

.adpt-carousel .carousel-nav > li {
    background: #3E3E3E;
    color: #fff;
}

.adpt-carousel .carousel-nav > li.active {
    background: #1078BF;
    color: #fff;
}

.adpt-carousel .carousel-nav > li.active .arrow-up {
    border-bottom-color: #1078BF;
}