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) |
|---|---|---|---|---|
|
|
A Drupal attributes object. Used to apply with extra HTML attributes to the outer <bolt-carousel> tag. |
object
| — |
|
|
|
Array of content to include in the carousel. Note: each slide gets wrapped with a |
array
| — |
|
|
|
Controls the number of slides to be shown at once. |
string
|
1
|
|
|
|
Controls the number of slides to be swiped at once. |
string
|
auto
|
|
|
|
Controls the horizontal spacing between each slide. |
string
|
medium
|
|
|
|
Positions the previous and next buttons to either inside or outside of the carousel container. |
string
|
inside
|
|
|
|
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
|
|
|
|
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}}
|
|
|
|
- [1 ~ 6]
Limits the maximum number of slides that can display at any screen size. Combine this with the |
integer
|
5
|
|
|
|
Controls whether or not carousel content should be offset by 5px at the start. |
boolean
| — |
|
|
|
Controls whether or not carousel content should be offset by 5px at the end. |
boolean
| — |
|
|
|
Removes the pagination. Not recommended unless being used with an alternative UI to display carousel progress (such as custom thumbnail previews). |
boolean
|
false
|
|
|
|
Removes the scrollbar. Not recommended unless being used with an alternative UI to display carousel progress (such as custom thumbnail previews). |
boolean
|
false
|
|
|
|
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
|
|
|
|
Switches between the default carousel mode and the image gallery mode. |
string
|
default
|
|
|
|
Set to true and click on any slide will produce transition to this slide. |
boolean
|
false
|
|
|
|
Enables continuous loop mode. Note: the loop option is temporarily disabled and will be re-enabled in a future Bolt release. |
boolean
|
false
|
|