2.9.2

Carousel

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

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

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, 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, 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, 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}}
Open Accordion Close Accordion
Max_slides_per_view - [1 ~ 6]

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 5
Slide_offset_before

Controls whether or not carousel content should be offset by 5px at the start.

boolean
Slide_offset_after

Controls whether or not carousel content should be offset by 5px at the end.

boolean
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. Note: the loop option is temporarily disabled and will be re-enabled in a future Bolt release.

boolean false
  • true, false