Carousel

Carousels, also known as sliders, let you display text, graphics, images, by animated automatic or manual horizontal scrolling. It has built-in and configurable navigation buttons and page indicators.

Creating a Carousel

By using the 'Carousel' entry of the Toolset or the menu command 'Insert -> Carousel', you can place the carousel on the website. Then you can edit the content of each page for the carousel: Edit the text directly on the page, add buttons, images, hyperlinks, whatever you like. Select another page using the entry "Active Page" in the property window to edit other pages. You can select a background image for each page using the "BackgroundImage" property in the property window.

Properties

This component supports several background modes (Color, Image, Gradient), changeable by selecting the property 'BackgroundMode'. It also supports several border modes. The background will only be visible if the image files cannot be loaded or the currently shown image is transparent.

Other supported properties are:

PageCount: Enter a number how many pages there should be
Active Page: The currently selected page. Change this to the page you want to edit, and with which page the carousel should start on the website.
AnimationMode: How the transition between the pages should happen.
TimeForAnImage: Time in milliseconds how long an image or page is shown before switching to the next page. 1000 is one second.
TimeForFading: Time in milliseconds how long a page in the carousel will be faded out and the next is fading in. The default is 250 which is a quarter of one second.
ImageAdjusting: How the background image is adjusted to the size of the component. You can tell the image to fit in width, in height or to fill the full size of the compnenet as best as possible ('cover').
FixedAspectRatio: When checked, keeps the component aspect ratio the same no matter how large it is (depending on the responsive size of the website)

There is also the option to show navigation Buttons (the buttons to the left and right) and page indicators (small circles on the bottom of the component). Use these properties for that:

NavButtons: Enables the navigation buttons
PageIndicator: Enables the page indicator controls.

Colors and appearance of both of these can be adjusted using the properties which appear when these are checked.

Interactive Carousel

If you don't want to use the integrated navigation buttons, you can your own buttons with links for selecting the next or the previous image. Create a Hyperlink (see Hyperlinks to see how to do this) and choose 'Invoke a special RocketCake action' as link type for this. A dialog will then pop up where you can select the action 'switch to next image in slideshow' or 'switch to previous image in slideshow' and the target slideshow element for that action.