Introduction

This tutorial explains how to create a rotating image carousel with Text Blocks. 
Add a Text Block Group to your Page

Begin by creating a new page, or editing the page where the carousel will appear. In the content editor, click the "Text Block" link in the right sidebar, under the "Add Content" heading. This will add a new Text Block Group to the page.

Return to Top
Edit the Text Block Group's Settings

Click the "Settings" link in the upper right corner of the Text Block Group. This will open the Settings panel to the "Display Options" tab.

Here, locate the "Layout" option, and change the setting to "Carousel." Next, locate the "Image Size" option, and change the setting to "Featured." 

To have your carousel rotate automatically, click the "Variables" tab at the top of the Settings panel. Here, you should see two empty fields, separated by an "equals sign." Enter "AutoPlay" in the left-hand field, and "true" in the right-hand field.

To set the rotation speed, click the "Add Item" button and enter "Interval" in the left-hand field, then the number of milliseconds inbetween rotations in the right-hand field (ex. entering "1000" would cause the carousel to wait one second between rotations). By default, the carousel will rotate every 0.8 seconds.

Return to Top
Add Text Blocks and Attach Images

At the bottom of the Text Block Group, click the "New Text Block" button. This will add a Text Block to the group, and open the editing window. First, you will need to type a single "space" in the Content field (a Text Block cannot be submitted without content, and this satisfies the requirement without adding any text). 

Next, click the collapsed "Properties" section to expand it. Here, use the "Upload image" or "Choose from warehouse" button to attach your image. Note, the carousel was designed to accept images with a resolution of 900x600. Images with a larger or smaller resolution may appear "squashed" or "stretched" in the carousel.

The "URL" field can also be used to link your image to the web page of your choice. The full URL of the webpage must be entered, beginning with "http://" or "https://."

Once you have attached the image, and (optionally) entered a URL, click the "Submit" button to add the Text Block to the group. Repeat this step to add more images to your carousel.

Return to Top