| Recommended | Not Recommended |
|---|---|
| Encourage Exploration: Use carousels to highlight content that invites user curiosity and exploration, like "Did You Know?" facts or tips related to the main subject. | No Critical Info: Don't use carousels for essential content; it might be overlooked. |
| Series Introduction: Use the carousel to introduce a series of upcoming events, workshops, or webinars that users may find value in, but which are not the primary focus of the page. | Limit Slide Count: Too many slides can fatigue users. |
| Showcase Varied but Coherent Content Types: Employ the carousel to display different types of media, such as images, short videos, and articles, ensuring they are unified by a common theme or message. | Avoid Nested Carousels: Nesting a carousel within another carousel can make navigation a confusing, disorienting experience for the user. |
{% include '@bolt-components-carousel/carousel.twig' with {
slides: [
'Slide 1',
'Slide 2',
'Slide 3',
]
} only %}| 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 |
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
|
|
|
slides_per_group
|
Controls the number of slides to be swiped at once. |
string
|
auto
|
|
|
space_between
|
Controls the horizontal spacing between each slide. |
string
|
medium
|
|
|
nav_button_position
|
Positions the previous and next buttons to either inside or outside of the carousel container. |
string
|
inside
|
|
|
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}}
|
|
|
max_slides_per_view
|
- [1
~
4]
Limits the maximum number of slides that can display at any screen size. Combine this with the |
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
|
|
|
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
|
|
npm install @bolt/components-carousel