Carousel

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

Published Last updated: 4.2.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-carousel/carousel.twig" with {
  slides: [
    "Slide 1",
    "Slide 2",
    "Slide 3",
  ]
} only %}
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. Note: the value auto is deprecated, please be explicit.

string 1
  • 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
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}}
Advanced Schema Options
max_slides_per_view
- [1 ~ 4]

Limits the maximum number of slides that can display at any screen size. Combine this with the slidesPerView option to get the benefits of automatically adjusting the number of slides displayed at different screen sizes while putting a max limit of how many slides display at once.

integer 4
no_pagination

Removes the pagination. Not recommended unless being used with an alternative UI to display carousel progress (such as custom thumbnail previews).

boolean false
no_scrollbar

Removes the scrollbar. Not recommended unless being used with an alternative UI to display carousel progress (such as custom thumbnail previews).

boolean false
no_min_width

Disables the slide min width logic. Typically not recommended unless being used with an alternative UI to display carousel progress (such as custom thumbnail previews).

boolean false
mode

Switches between the default carousel mode and the image gallery mode.

string default
  • default, gallery, gallery-thumbnail
slide_to_clicked_slide

Set to true and click on any slide will produce transition to this slide.

boolean false
loop

Enables continuous loop mode.Not: the loop option is temporarily disabled and will be re-enabled in a future Bolt release.

boolean false
Install Install
  npm install @bolt/components-carousel
Dependencies @bolt/components-button @bolt/core-v3.x @bolt/lazy-queue swiper