The following article outlines the instructions for the use of the Carousel snippet. This is a dynamic snippet which can be used to showcase important content. A working example of the Carousel snippet can be viewed on the Chronos Sample Site.
Please note, publishers are responsible for the copyright and the content of all the images used, and that they must adhere to all other University regulations.
Image Preparation
- It is advised that you prepare the images to be used in the Carousel snippet first
- The snippet defines the dimensions of the images
- The width and height of the snippet are predefined as 462x132 px; these are Publisher definable
- The banner of the snippet has a height of 25 px which must be taken into account when setting the dimensions of the snippet in relation to the images
- Images are not scaled to fit this snippet; they are displayed as they are - whether larger or smaller - defined by the dimensions of the snippet
- For consistency, it is essential that all images have the same width and height and that these dimensions are replicated for the snippet itself (plus the 25 px for the banner on the snippet)
Implementation
Carousel controls
- Choose the standard or index Carousel, drag and drop either the primary, secondary or highlight Carousel snippet to the desired location
- In Design view, complete the parameter table as follows:
- Pause time (seconds): Default 5 seconds; minimum of 3, maximum of 5
- Animation style (fade only): As per the field, fade only
- Fixed Width (px): Default 462 px; minimum of 240 px, maximum of 508 px
- Fixed Height (px): This is the total height of the snippet. Please add 25 px (height of the title border) to the height of the image to be displayed when completing this field
Carousel items
- Assigned to each Carousel, by default, are 3 Carousel items; each one with its own parameter table
- In Design view, complete their parameter tables as follows:
- Background Image (Use the Point to File tool): Select the broken image and then at the Src box in the Properties panel, use the Point to File to point to the image you wish to display
- Header: This is the title of this specific link/image
- Text: More descriptive information about this Carousel item. Please try and keep as concise as possible
- Destination: Where you wish this Carousel item to link to. Again, use the Point to File tool next to the Link field in the Properties panel
- Repeat this process for every Carousel item (maximum 6 per Carousel) you wish to have
- To add a new Carousel item, drag and drop Carousel add item from the snippet pack to the location within the Carousel container where you wish the item to appear and repeat the above steps
- Save the HTML file and check in Preview before publishing to Live
Best Practice
- Carousels are designed to hold a maximum of 6 items. Any additional items will be ignored
- There are 2 types of carousel; standard and index. Standard has a small text box in the top left to put captions/text in. The index carousel is designed to hold more text and places it in an overlay at the bottom of the image.
- The width and the height of the snippet are predefined but can be modified. It is therefore advised that you decide on a width and a height prior to chosing your images
- Keep dynamic snippets on pages down to a minimal. Too many detract from one another making it hard for the user to focus on the important information you are providing
- Keep the amount of text used to a small amount to make sure it fits in the text box. If you use the index carousel the text box will expand upwards, make sure not to obscure too much of the image with text.