Petru Paler
c0b939627b
- Add PLAN.md with 40-step checklist across 10 phases - Add CLAUDE.md with project-specific instructions - Set up nix flake with FastHTML/MonsterUI dependencies - Create Python package skeleton (src/animaltrack) - Vendor FastHTML and MonsterUI documentation - Add Docker build configuration 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
3.1 KiB
Carousel Sliders API Reference
Here is a simple example of a slider:
See Source
See Output
[code]
def ex_sliders_1():
return Slider(*[Img(src=f'https://picsum.photos/200/200?random={i}') for i in range(10)])
[/code]
Here is a slider with cards:
See Source
See Output
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
[code]
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)])
[/code]
Here is a slider with cards and autoplay:
See Source
See Output
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
[code]
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')
[/code]
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
[code]
Slider(*c, cls='', items_cls='gap-4', nav=True, nav_cls='', **kwargs) -> fastcore.xml.FT
[/code]
Creates a slider with optional navigation arrows
Params
-
cItems to show in slider -
clsClasses for slider container -
items_clsClasses for items container -
navWhether to show navigation arrows -
nav_clsClasses for navigation arrows -
kwargs
Returns: SliderContainer(SliderItems(..., cls='gap-4'), SliderNav?)
SliderContainer
Source
[code]
SliderContainer(*c, cls='', uk_slider=True, **kwargs) -> fastcore.xml.FT
[/code]
Creates a slider container
Params
-
cComponents -
clsAdditional classes on the container -
uk_sliderSee FrankenUI Slider docs for more options -
kwargs
Returns: Div(..., cls='relative', uk_slider=True, ...)
SliderItems
Source
[code]
SliderItems(*c, cls='', **kwargs) -> fastcore.xml.FT
[/code]
Creates a slider items container
Params
-
cComponents -
clsAdditional classes for the items -
kwargs
Returns: Div(..., cls='uk-slider-items uk-grid', ...)
SliderNav
Source
[code]
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
[/code]
Navigation arrows for Slider component
Params
-
clsAdditional classes for the navigation -
prev_clsAdditional classes for the previous navigation -
next_clsAdditional classes for the next navigation -
kwargs
Returns: Left and right navigation arrows for Slider component