Skip to end of metadata
Go to start of metadata

ThemeBuilder Macro - 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 ThemeBuilderresource, before adding the carousel macros. We recommend using images that are 966px wide by 300 pixels high.

NameDescriptionCategories

static-carousel

Container for a group of carousel pagesconfluence-content

carousel-page

Defines a carousel pageconfluence-content


Usage

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}

Parameters - 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)

Parameters - Carousel Page

Parameter

Name

Description

Type

Default

Required

target

Link Target

The page that is being linked to

confluence-content


(tick)

image

Background Image

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

string


(tick)

heading

Heading Text

The heading text

string


(tick)

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-textAlt 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)

Parameters - Dynamic Carousel (dynamic-carousel)

Parameter

Name

Description

Type

Default

Required

spaces

Spaces

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

spacekey


(error)

parents

Parents

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

confluence-content


(error)

labels

Labels

Only pages with one of these labels will be checked. Default is any label

string


(error)

authors

Authors

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

string


(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

Note: when importing Carousels between pages or ThemeBuilderpanels, 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}

Result

Styling the 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;
}