Index:
- Add an Image or Video as a Slide
- Add a Flexitive Page as a Slide
- Changing the Slide Order
- Editing Widget Controls
The Carousel Widget allows you to place a container on your canvas that will display a series of Flexitive Pages or Assets as a slideshow. The slides in the Carousel Widget will automatically rotate at 5-second intervals. For an example of a carousel widget in a Flexitive design, check out the design below.
The Carousel Widget can be built to be fully responsive, so you can use the same widget on any size in your design project and it will still look good.
You can also find a full video tutorial on adding a Carousel Widget to your design here.
To add a Carousel Widget to your Flexitive design, select the Widgets icon, and scroll to the 'Interactive' dropdown. To add the Carousel Widget to your design, tap 'Carousel'.
Selecting the Carousel Widget will add the default Carousel to your canvas. This default carousel will not have any prepopulated slides. You will then need to add slides to your widget.
Add an Image or Video as a Slide
To add an image or video to your Carousel Widget, open the Assets Panel and under the Images or Video tab, tap the 'Add to Widget' button next to the asset you would like to add. Learn more about adding Assets here.
When you add an element to the Carousel Widget, a corresponding Slide is created under the Carousel Settings Panel.
Add a Flexitive Page as a Slide
You can add a Flexitive design to your Carousel Widget by embedding a Flexitive Page into your slides. To do so, open the Assets Panel and under 'Pages', select Design ID and enter the Design ID for the page you wish to display. Learn how to Find your Design ID here.
Pages added to a Widget are referred to as Child Pages. You can edit the Child Page or your widget by selecting the pencil icon of the slide.
For more information on how to edit the slides of your widget, check out our article on Child Pages.
Changing the Slide Order
To change the order of the slides, simply grab the Dotted Icon and move the slide to the desired position.
Editing Widget Controls
Under the Controls section of the Carousel Widget, you’ll be able to set how the Carousel Widget will transition between slides and how it will interact with viewers.
Animations
From the Animations dropdown, you can control the type and direction of the animation effect used between the carousel slides. Right now, you can choose between the Slide animation effect, and the No Animation Effect/Flick. By default, the Carousel Slides are set to transition between each slide using the Slide (Right to Left) animation effect.
Loop and Swipe
You can also control whether or not your Carousel will be able to Loop, and whether or not the option for Swipe Interaction will be available. Both the Loop and Swipe Controls are toggled to ON by default.
If the Loop option is set to ON, your widget will continually transition. If the last slide is being displayed, the next slide displayed will automatically jump back to the first slide.
If the Swipe option is set to ON, a user will be able to scroll through the slides by swiping on the widget.
Transition Delay and Duration
Transition Delay is the amount of time your Carousel Widget slide will be displayed for. The default value for the Transition Delay is 5 seconds.
The Transition Duration is the amount of time it takes for the animation between slides to complete. The default value for the Transition Duration is .5 seconds.
