Last updated
Was this helpful?
Last updated
Was this helpful?
Carousel is a widget in Supervisely that allows loop a series of images or texts in a limited space on the UI.
Example of input data we will use.
Determine input Carousel widget data.
type: List[Carousel.Item]
Determine height of the Carousel widget.
type: int
default value: 350
Index of the initially active slide (starting from 0).
type: int
default value: 0
Determine how indicators are triggered.
type: Literal["hover", "click"]
default value: "click"
Determine whether automatically loop the slides.
type: bool
default value: False
Determine interval of the auto loop, in milliseconds.
type: int
default value: 3000
Determine position of the indicators.
type: Literal["outside", "none"]
default value: "none"
Determine when arrows are shown.
type: Literal["always", "hover", "never"]
default value: "hover"
Determine type of the Carousel.
type: Union[Literal["card"], None]
default value: None
You can find this example in our Github repository:
First, we load environment variables with credentials and init API for communicating with Supervisely Instance:
You can use images from local directory or image URL.
Carousel and Text widgetsPrepare a layout for app using Card widget with the content parameter.
Create an app object with layout parameter.
items
List[Carousel.Item]
Input Carousel data
height
int
Height of the Carousel
initial_index
int
Index of the initially active slide (starting from 0)
trigger
Literal["hover", "click"]
How indicators are triggered
autoplay
bool
Whether automatically loop the slides
interval
int
Interval of the auto loop, in milliseconds
indicator_position
Union[Literal["outside", "none"], None]
Position of the indicators
arrow
Literal["always", "hover", "never"]
When arrows are shown
type
Union[Literal["card"], None]
Type of the Carousel
widget_id
str
ID of the widget
get_active_item()
Return Carousel selected index.
get_items()
Return Carousel items.
set_items(value: List[Carousel.Item])
Set Carousel items.
add_items(value: List[Carousel.Item])
Add items in Carousel.
set_height()
Set Carousel height.
get_initial_index()
Return Carousel initial_index value.
set_initial_index()
Set Carousel initial_index value.
@value_changed
Decorator function to handle selected value change.
