Carousel Sliders API Reference

Here is a simple example of a slider:

def ex_sliders_1():
    return Slider(*[Img(src=f'https://picsum.photos/200/200?random={i}') for i in range(10)])

Here is a slider with cards:

Card 0

Card 0 content

Card 1

Card 1 content

Card 2

Card 2 content

Card 3

Card 3 content

Card 4

Card 4 content

Card 5

Card 5 content

Card 6

Card 6 content

Card 7

Card 7 content

Card 8

Card 8 content

Card 9

Card 9 content

def ex_sliders_2():
    def _card(i): return Card(H3(f'Card {i}'), P(f'Card {i} content'))
    return Slider(*[_card(i) for i in range(10)])

Here is a slider with cards and autoplay:

Card 0

Card 0 content

Card 1

Card 1 content

Card 2

Card 2 content

Card 3

Card 3 content

Card 4

Card 4 content

Card 5

Card 5 content

Card 6

Card 6 content

Card 7

Card 7 content

Card 8

Card 8 content

Card 9

Card 9 content

def ex_sliders_3():
    def _card(i): return Card(H3(f'Card {i}'), P(f'Card {i} content'))
    return Slider(*[_card(i) for i in range(10)], items_cls='gap-10', uk_slider='autoplay: true; autoplay-interval: 1000')

Typically you want to use the Slider component, but if you need more control you can use the SliderContainer, SliderItems, and SliderNav components.

Slider

Source

Slider(*c, cls='', items_cls='gap-4', nav=True, nav_cls='', **kwargs) -> fastcore.xml.FT

Creates a slider with optional navigation arrows

Params

c Items to show in slider
cls Classes for slider container
items_cls Classes for items container
nav Whether to show navigation arrows
nav_cls Classes for navigation arrows
kwargs

Returns: SliderContainer(SliderItems(..., cls='gap-4'), SliderNav?)

SliderContainer

Source

SliderContainer(*c, cls='', uk_slider=True, **kwargs) -> fastcore.xml.FT

Creates a slider container

Params

c Components
cls Additional classes on the container
uk_slider See FrankenUI Slider docs for more options
kwargs

Returns: Div(..., cls='relative', uk_slider=True, ...)

SliderItems

Source

SliderItems(*c, cls='', **kwargs) -> fastcore.xml.FT

Creates a slider items container

Params

c Components
cls Additional classes for the items
kwargs

Returns: Div(..., cls='uk-slider-items uk-grid', ...)

SliderNav

Source

SliderNav(cls='uk-position-small uk-hidden-hover', prev_cls='absolute left-0 top-1/2 -translate-y-1/2', next_cls='absolute right-0 top-1/2 -translate-y-1/2', **kwargs) -> fastcore.xml.FT

Navigation arrows for Slider component

Params

cls Additional classes for the navigation
prev_cls Additional classes for the previous navigation
next_cls Additional classes for the next navigation
kwargs

Returns: Left and right navigation arrows for Slider component