Index:


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


You can change the order of the slides by using the Arrow Icons at the top of the Carousel Settings Panel or by using the Dotted Icon next to each slide. 


Arrow Icons

Select the slide you want to move and tap either the Bring to Top, Bring Forward, Send Backward or Send to Bottom icons at the top of the layers panel. 



Dotted Icon

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 1 second.