Carousel
Last updated
Last updated
The Carousel widget, often called an image slider, is a popular design element used to display a series of images or content in a horizontal or sometimes vertical format. The primary purpose of a carousel slider is to showcase multiple pieces of information, such as images, product features, news articles, or testimonials, within limited screen space.
To add the Carousel widget to your app:
Add the Carousel widget from the Widget Tree section.
In the widget tree, it is represented as Carousel. To add it to your page you need to select it from Choose widget dialog box.
You can customize the appearance and behavior of this widget using the various properties available under the properties panel.
Aspect ratio is used if no height have been declared. The default value of aspect ratio is 16:9 i.e. 1.78. In case you want height equal to width then aspect ratio will be 1.
You might want to display a specific slide as soon as it is loaded. To do so, move to the Widget Properties Panel enter the Initial Page Index value. Please note that the slide index starts from 0. So, if you want to set slide 1, you should enter 0. If you want to set slide 2, you should enter 1, and so on.
By default, the center page in not enlarged i.e. all the pages are having same size. To enlarge the center page , turn on to switch in the properties panel named as Enlarge center page as shown in the image below.
By default, the content of the carousel does not loop continuously. To start the loop of contents , move to the Widget properties panel and turn on the Enable infinite scroll switch.
This is the fraction of the viewport that each page should occupy. You can use the Viewport Fraction to change the size of a single item, i.e., the item in the center. Defaults to 0.8, which means each page fills 80% of the carousel.
When autoplay is enable, the carousel will automatically transition from one slide to the next at regular intervals, determined by the following options:
Auto Play Animation Duration: The amount of time (in milliseconds) that it takes to transition from the current slide to the next. By default, the value of auto play animation duration is 800 milliseconds.
Auto Play Interval: The amount of time (in milliseconds) that the item remains in the center before moving to the next one. By default, the value of auto play intervar is 1600 milliseconds.
