Carousel

A carousel component for displaying slides with navigation controls

Slide 1

This is the first slide of the carousel.

Slide 2

This is the second slide of the carousel.

Slide 3

This is the third slide of the carousel.

_bookshop_name: wrappers/carousel
slides:
  - contentBlocks:
      - _bookshop_name: primitives/heading
        text: Slide 1
        level: h2
        align: center
      - _bookshop_name: primitives/paragraph
        align: center
        text: This is the first slide of the carousel.
  - contentBlocks:
      - _bookshop_name: primitives/heading
        text: Slide 2
        level: h2
        align: center
      - _bookshop_name: primitives/paragraph
        text: This is the second slide of the carousel.
        align: center
  - contentBlocks:
      - _bookshop_name: primitives/heading
        text: Slide 3
        level: h2
        align: center
      - _bookshop_name: primitives/paragraph
        text: This is the third slide of the carousel.
        align: center

Properties

label string

Optional label for the carousel to help identify it in the editor.

slides string | default: array

autoPlay boolean | default: false

Enable auto-play functionality.

autoScroll boolean | default: false

Enable auto-scroll functionality.

slideWidthPercent enum | default: 100%

Width of each slide as a percentage.

Accepted values:

33%
50%
100%

minSlideWidth number | default: 0

Minimum width of slides in pixels. Prevents slides from getting too small.

Examples

Auto play

_bookshop_name: wrappers/carousel
style: 'max-width: 530px;margin-inline: auto;'
autoPlay: true
slides:
  - contentBlocks:
      - _bookshop_name: primitives/image
        src: /images/component-library/quiet-street.jpg
        alt: Quiet Street
  - contentBlocks:
      - _bookshop_name: primitives/image
        src: /images/component-library/sunset.jpg
        alt: Sunset
  - contentBlocks:
      - _bookshop_name: primitives/image
        src: /images/component-library/sheep.jpg
        alt: Sheep
  - contentBlocks:
      - _bookshop_name: primitives/image
        src: /images/component-library/castle.jpg
        alt: Castle
  - contentBlocks:
      - _bookshop_name: primitives/image
        src: /images/component-library/dunedin-cliff.jpg
        alt: Dunedin Cliff

Auto scroll

_bookshop_name: wrappers/carousel
style: 'max-width: 530px;margin-inline: auto;'
autoScroll: true
slides:
  - contentBlocks:
      - _bookshop_name: primitives/image
        src: /images/component-library/quiet-street.jpg
        alt: Quiet Street
  - contentBlocks:
      - _bookshop_name: primitives/image
        src: /images/component-library/sunset.jpg
        alt: Sunset
  - contentBlocks:
      - _bookshop_name: primitives/image
        src: /images/component-library/sheep.jpg
        alt: Sheep
  - contentBlocks:
      - _bookshop_name: primitives/image
        src: /images/component-library/castle.jpg
        alt: Castle
  - contentBlocks:
      - _bookshop_name: primitives/image
        src: /images/component-library/dunedin-cliff.jpg
        alt: Dunedin Cliff

Width percentage

_bookshop_name: wrappers/carousel
style: 'max-width: 800px;margin-inline: auto;'
slideWidthPercent: 33%
minSlideWidth: 200
slides:
  - contentBlocks:
      - _bookshop_name: wrappers/card
        paddingHorizontal: xs
        contentBlocks:
          - _bookshop_name: primitives/image
            src: /images/component-library/quiet-street.jpg
            alt: Quiet Street
  - contentBlocks:
      - _bookshop_name: wrappers/card
        paddingHorizontal: xs
        contentBlocks:
          - _bookshop_name: primitives/image
            src: /images/component-library/sunset.jpg
            alt: Sunset
  - contentBlocks:
      - _bookshop_name: wrappers/card
        paddingHorizontal: xs
        contentBlocks:
          - _bookshop_name: primitives/image
            src: /images/component-library/sheep.jpg
            alt: Sheep
  - contentBlocks:
      - _bookshop_name: wrappers/card
        paddingHorizontal: xs
        contentBlocks:
          - _bookshop_name: primitives/image
            src: /images/component-library/castle.jpg
            alt: Castle
  - contentBlocks:
      - _bookshop_name: wrappers/card
        paddingHorizontal: xs
        contentBlocks:
          - _bookshop_name: primitives/image
            src: /images/component-library/dunedin-cliff.jpg
            alt: Dunedin Cliff