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)

carousel_default

Parameters

Parameters	Type	Description
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)

height

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)

interval

indicator_position

Determine position of the indicators.

type: Literal["outside", "none"]

default value: "none"

carousel = Carousel(items=items, indicator_position="outside")

indicator_position

arrow

Determine when arrows are shown.

type: Literal["always", "hover", "never"]

default value: "hover"

carousel = Carousel(items=items, arrow="always")

arrow

type

Determine type of the Carousel.

type: Union[Literal["card"], None]

default value: None

carousel = Carousel(items=items, type="card")

type

Methods and attributes

Attributes and Methods	Description
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, Text

Init 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 = 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")

layout