A web-component powered carousel component for cycling through a series of content such as images, text, or cards.

Bolt's Component Explorer is being upgraded. It'll return in a future release!

The <bolt-carousel> provides all the basic functionality expected with a modern carousel with a sliding effect, left/right arrow buttons, and page dots. The user can move between each carousel slide with touch, the mouse, the keyboard, or a trackpad.

Under the hood, the <bolt-carousel> component uses the excellent Swiper library to provide top-notice mobile, responsive, and touch support.

Install via yarn
yarn add @bolt/components-carousel

Via Web Component

    Slide 1
    Slide 2
    Slide 3

Via Twig

{% include "@bolt-components-carousel/carousel.twig" with {
  slides: [
    'Slide 1',
    'Slide 2',
    'Slide 3',
} only %}


The <bolt-carousel> component is most appropriate when:

  • You want to present to the user with a collection of images, or a mixture of images and text content.
  • You want to allow the user focus on a single item at a time.
  • The total number of items to display is relative small (between 2 and 10 items).

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)

A Drupal attributes object. Used to apply with extra HTML attributes to the outer <bolt-carousel> tag.


Array of content to include in the carousel. Note: each slide gets wrapped with a <bolt-carousel-slide> automatically.


Controls the number of slides to be shown at once.

string 1
  • auto, 1, 2, 3, 4

Controls the number of slides to be swiped at once.

string auto
  • auto or 1

Controls the horizontal spacing between each slide.

string medium
  • none, small, medium

Positions the previous and next buttons to either inside or outside of the carousel container.

string inside
  • inside or outside

Makes overflowing carousel slides visible.

boolean false

Visually hide the previoius and next nav buttons.

boolean false

Allows the carousel to automatically rotate through its slides until the user interacts with it.

boolean false
  • true or false

Enables content to be freely scrolled and flicked without snapping to an end position. Automatically switches off the pagination and switches on the scrollbar.

boolean false

Accessible label for previous button.

string Previous slide

Accessible label for next button.

string Next slide

Accessible label for the previous button when the carousel is on the first slide.

string This is the first slide

Accessible label for previous button when the carousel is on the last slide.

string This is the last slide

Accessible label for a single pagination bullet.

string Go to slide {{index}}