1 Introduction
The Carousel widget displays images in a carousel.
1.1 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
1.2 Demo App Project
For a demo app project that has been deployed with this widget, see here.
2 Usage
The widget requires a context configured on the Data Source tab. The possible data sources are described below.
2.1 Static Data Source
When this option is selected, do the following:
- 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
2.2 Database Data Source
When this option is selected, do the following:
- 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
2.3 Microflow Data Source
When this option is selected, do the following:
- 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
3 Developing This Marketplace Component
To contribute to the development of this widget, follow these steps:
- Install the following:
- Fork and clone the mendixlabs/carousel repository. The code is in Typescript.
- Set up the development environment by running
npm install
. - Create a folder named dist in the project root.
- Create a Mendix test project in the dist folder and rename its root folder to dist/MxTestProject, or get the test project from mendixlabs/carousel. Changes to the widget code will be automatically pushed to this test project.
- To automatically compile, bundle, and push code changes to the running test project, run
grunt
. - To run the project unit tests with code coverage (results can be found at
dist/testresults/coverage/index.html
), run:npm test
. - Run the unit test continuously during development via
karma start
.
We are actively maintaining this widget. Please report any issues or suggestions for improvement at mendixlabs/carousel.