Carousel

1 Introduction

The Carousel widget displays images in a carousel.

1.1 Features

• Allows you to use the widget as a composable region for your image widgets, text widgets, and more
• Navigate to the next or previous image using arrows or dots
• Autoplay your images
• Set the timeouts between each slide
• Use the infinite loop to scroll through slides endlessly
• Add animation when slides are switched

2 Usage

The widget requires a defined Data source available in the General tab. The possible data sources are described below.

2.1 Data Source

• Select a System.Image type of entity as a data source
• Place an Image widget inside of the content area and configure it as it is described in Image

3 Configuration

The following sections will describe the different available widget properties and how to configure the widget using them.

3.1 General tab

• Data source – see Data source documentation for more details

3.2 Display

• Pagination – shows pagination dots
  • Default: Yes
• Navigation controls – shows arrows on the left and right side
  • Default: Yes
• Autoplay – allows images to start sliding automatically when the widget is ready
  • Default: Yes
• Delay – creates a time interval between one item cycling to the next
  • Default: 1000ms
• Infinite loop – cycles between images endlessly
  • Default: Yes
• Animation – adds a fade animation on each cycle
  • Default: Yes

3.3 Events

• On click action – executes an action when the carousel item is clicked

4 Widgets Below Version 2.0.0

Features:

• Supports different data sources:
  • Set static images in Studio Pro
  • Retrieve images from the database via XPath
  • Retrieve images via a microflow
• Use images from System.Images or from a URL
• Navigate to the next or previous image
• Execute a microflow or nanoflow or open a page when an image is clicked
• Swipe through images on mobile devices

Usage

The widget requires a context configured on the Data Source tab. The possible data sources are described below.

Static Data Source:

• In the Static images section, click New to add static images from Studio Pro and also configure an on-click action
• On the On click action tab of the Edit Static Images Item dialog box, configure only one of option:: Microflow, Nanoflow, or Page

Database Data Source:

• Specify the Images entity and the XPath constraint (if any)
• On the Behavior tab, configure the On click behavior
  • For the Call microflow, Call nanoflow, and Show page options, specify the respective microflow, nanoflow, or page
• Specifying a URL attribute will make the value of the URL attribute the priority

Microflow Data Source:

• Specify the Images entity and the Microflow from which the carousel images will be retrieved (both are required)
• On the Behavior tab, configure the On click behavior
  • For the Call microflow, Call nanoflow, and Show page options, specify the respective microflow, nanoflow, or page
• Specifying a URL attribute will make the value of the URL attribute the priority