Carousel - Container and Page

These macros are used together to create a rotating carousel of images and links. Before adding the carousel macros, attach the required images to the page, or add them as a ThemeBuilder resource.

Macro Key

Instructions

How to add a Carousel via Container and Page in Confluence:

1. Click Create on the desired page.

2. Select Blank Page, then click Create.

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

   

4. On 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, 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

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

Parameters - Carousel Page

Parameters - Dynamic Carousel (dynamic-carousel)

Example

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