# 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**

  * `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

[code]

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

> 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

[code]

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

> 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

[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**

  * `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