2.8.0-beta.4

Carousel

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

Published

History
View changes
Install
yarn add @bolt/components-carousel
Source code
View on Github
Dependencies

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

Overview

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

Usage

Via Web Component

<bolt-carousel>
  <bolt-carousel-slide>
    Slide 1
  </bolt-carousel-slide>
  <bolt-carousel-slide>
    Slide 2
  </bolt-carousel-slide>
  <bolt-carousel-slide>
    Slide 3
  </bolt-carousel-slide>
</bolt-carousel>

Via Twig

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

Guidelines

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).

Schema

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)
attributes

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

 object —
  • —
slides

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

 array —
  • —
slides_per_view

Controls the number of slides to be shown at once.

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

Controls the number of slides to be swiped at once.

 string auto
  • auto or 1
space_between

Controls the horizontal spacing between each slide.

 string medium
  • none, small, medium
nav_button_position

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

 string inside
  • inside or outside
overflow

Makes overflowing carousel slides visible.

 boolean false
  • —
no_nav_buttons

Visually hide the previoius and next nav buttons.

 boolean false
  • —
autoplay

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

 boolean false
  • true or false
free_scroll

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
  • —
prev_slide_message

Accessible label for previous button.

 string Previous slide
  • —
next_slide_message

Accessible label for next button.

 string Next slide
  • —
first_slide_message

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

 string This is the first slide
  • —
last_slide_message

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

 string This is the last slide
  • —
pagination_bullet_message

Accessible label for a single pagination bullet.

 string Go to slide {{index}}
  • —