Components

Carousel

Slides in a track that snaps one at a time, with previous, next and a dot per slide.

peek
scheme

forSlots(CarouselSlots)(Recipes.Carousel({}))

Usage

The function that drew the preview, over the theme module Create a theme writes. The preview passes it the style picked above instead of its default.

export const CarouselStyle = forSlots(CarouselSlots)(Recipes.Carousel({}))

const PLACES = ['Dunes', 'Coast', 'Ridge', 'Valley']

export const carousel = <Message>(
  style: NamedStyle<typeof CarouselSlots>,
  index: number,
  onIndex: (index: number) => Message,
  h: HtmlBuilder<Message>,
): Html =>
  h.div(
    [h.Style({ inlineSize: 'min(28rem, 100%)' })],
    [
      Carousel.view(
        {
          id: 'preview-carousel',
          label: 'Places',
          slides: PLACES.map(place =>
            h.div(
              [
                h.Style({
                  display: 'grid',
                  placeItems: 'center',
                  blockSize: '10rem',
                  border: '1px solid currentColor',
                }),
              ],
              [place],
            ),
          ),
          index,
          onIndex,
          style,
        },
        h,
      ),
    ],
  )

The recipe ↗This code ↗