2.16.1Carousel
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
-
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
|
|
Slides Per View: Auto
Slides Per View: 1
Slides Per View: 2
Slides Per View: 3
Slides Per View: 4
Autoplay: true
Autoplay: false
Basic Usage
When using the basic carousel component, it is recommended to pass the same type of content for each slide of the carousel, and make sure each piece of content have similar dimensions.
A carousel of bands
A carousel of calls to action
This Is an Eyebrow
This Is a Call to Action Headline 1
This Is an Eyebrow
This Is a Call to Action Headline 2
This Is an Eyebrow
This Is a Call to Action Headline 3
This Is an Eyebrow
This Is a Call to Action Headline 4
This Is an Eyebrow
This Is a Call to Action Headline 5
A carousel of cards
Slide 1
This is a card
Slide 2
This is a card
Slide 3
This is a card
Slide 4
This is a card
A carousel of images
A carousel of blockquotes
You buy yourself a tape recorder, you just record yourself for a whole day. I think you’re going to be surprised at some of your phrasing.
There’s always money in the banana stand.
I don’t understand the question and I won’t respond to it.
Advanced Usage
Use specific combination of props to create different kinds of advanced carousel.
Card Carousel
This card's media has an image carousel
Hero Band Carousel
Experience The Best of Both Worlds
Customer engagement meets intelligent automation.
Customer Success
Every enterprise success story starts with the right technology.