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 966 pixels wide by 300 pixels high or smaller.

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 click Save.

  4. In your new page, click the Tools drop-down menu.

  5. Select Attachments.

  6. Add desired image files for the carousel.

  7. Once the images upload, navigate back to the carousel child page by clicking the breadcrumb link in the top left portion of the page.

  8. Click Edit.

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

  10. Select Other Macros from the drop-down list.

  11. Search carousel in the pop-out menu.

  12. Select the Carousel Container macro.

  13. Set desired parameters and click Insert.

  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 desired parameters, then click Insert.

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

Result

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

ParameterNameDescriptionTypeDefaultRequired

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

ParameterNameDescriptionTypeDefaultRequired

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 - it can be attached to the page or as 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 leave the space blank to use the page name

string

Linked Page Name

error

tabtext

Tab Text

The text shown in the tab, or leave the space 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

Parameters - Dynamic Carousel (dynamic-carousel)

ParameterNameDescriptionTypeDefaultRequired

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, and @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}

Styling the Carousel

The background and text colors of the boxes on the carousel can be changed using this CSS. Use the code below to change the hex codes to your required color 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;
}