Carousel
Introduction
Carousel is a widget in Supervisely that allows loop a series of images or texts in a limited space on the UI.
Function signature
Carousel(
items: List[Carousel.Item],
height=150,
initial_index=0,
trigger="hover",
autoplay=True,
interval=3000,
indicator_position="none",
arrow="hover",
type=None,
widget_id=None,
)Example of input data we will use.
# Example of local image
image_id = 22683828
static = os.path.join(sly.app.get_data_dir(), "static")
api.image.download_path(image_id, os.path.join(static, "image.jpg"))
items = [
Carousel.Item(name="Slide 1", label="https://www.w3schools.com/howto/img_nature.jpg"), # image by URL
Carousel.Item(name="Slide 2", label=f"{os.path.join('static', 'image.jpg')}"), # image from local directory
Carousel.Item(name="Slide 3", label="Lorem ipsum dolor sit amet", is_link=False), # text
Carousel.Item(name="Slide 4", label="https://www.quackit.com/pix/samples/18m.jpg"),
Carousel.Item(name="Slide 5", label="https://i.imgur.com/OpSj3JE.jpg"),
]
carousel = Carousel(items=items)Parameters
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
items
Determine input Carousel widget data.
type: List[Carousel.Item]
height
Determine height of the Carousel widget.
type: int
default value: 350
carousel = Carousel(items=items, height=500)
initial_index
Index of the initially active slide (starting from 0).
type: int
default value: 0
trigger
Determine how indicators are triggered.
type: Literal["hover", "click"]
default value: "click"
autoplay
Determine whether automatically loop the slides.
type: bool
default value: False
interval
Determine interval of the auto loop, in milliseconds.
type: int
default value: 3000
carousel = Carousel(items=items, interval=1000)
indicator_position
Determine position of the indicators.
type: Literal["outside", "none"]
default value: "none"
carousel = Carousel(items=items, indicator_position="outside")
arrow
Determine when arrows are shown.
type: Literal["always", "hover", "never"]
default value: "hover"
carousel = Carousel(items=items, arrow="always")
type
Determine type of the Carousel.
type: Union[Literal["card"], None]
default value: None
carousel = Carousel(items=items, type="card")
Methods and attributes
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.
Mini App Example
You can find this example in our Github repository:
supervisely-ecosystem/ui-widgets-demos/media/012_carousel/src/main.py
Import libraries
import os
import supervisely as sly
from dotenv import load_dotenv
from supervisely.app.widgets import Card, Container, Carousel, TextInit API client
First, we load environment variables with credentials and init API for communicating with Supervisely Instance:
load_dotenv("local.env")
load_dotenv(os.path.expanduser("~/supervisely.env"))
api = sly.Api()Prepare items for cascader
You can use images from local directory or image URL.
image_id = 22683828
static = os.path.join(sly.app.get_data_dir(), "static")
api.image.download_path(image_id, os.path.join(static, "image.jpg"))
items = [
Carousel.Item(name="Slide 1", label="https://www.w3schools.com/howto/img_nature.jpg"),
Carousel.Item(name="Slide 2", label=f"{os.path.join('static', 'image.jpg')}"), # local images
Carousel.Item(name="Slide 3", label="Lorem ipsum dolor sit amet", is_link=False), # text
Carousel.Item(name="Slide 4", label="https://www.quackit.com/pix/samples/18m.jpg"),
Carousel.Item(name="Slide 5", label="https://i.imgur.com/OpSj3JE.jpg"),
]Initialize Carousel and Text widgets
Carousel and Text widgetscarousel = Carousel(items=items, autoplay=False, trigger="click", height=500)
text = Text()Create app layout
Prepare a layout for app using Card widget with the content parameter.
card = Card(
"Carousel",
content=Container([carousel, text]),
)
layout = Container(widgets=[card])Create app using layout
Create an app object with layout parameter.
app = sly.Application(layout=layout, static_dir=static)Add functions to control widgets from python code
@carousel.value_changed
def test(res):
info = f"Current slide index: {res}"
text.set(text=info, status="info")Last updated
Was this helpful?