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
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.
This Is an Eyebrow
This Is an Eyebrow
This Is an Eyebrow
This Is an Eyebrow
This Is an Eyebrow
Slide 1
Slide 2
Slide 3
Slide 4
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.
Use specific combination of props to create different kinds of advanced carousel.
Customer engagement meets intelligent automation.
Every enterprise success story starts with the right technology.
<bolt-carousel>
in the markup to make it render. For each slide, you must use <bolt-carousel-slide>
to wrap around the slide content.
<bolt-carousel>
<bolt-carousel-slide>
<div class="u-bolt-padding-large t-bolt-xdark">Slide 1</div>
</bolt-carousel-slide>
<bolt-carousel-slide>
<div class="u-bolt-padding-large t-bolt-dark">Slide 2</div>
</bolt-carousel-slide>
<bolt-carousel-slide>
<div class="u-bolt-padding-large t-bolt-light">Slide 3</div>
</bolt-carousel-slide>
</bolt-carousel>
<bolt-carousel>
element. Use unique combinations to customize a carousel to your liking.
<bolt-carousel nav-button-position="inside" slides-per-view=2 loop autoplay>
<bolt-carousel-slide>
<div class="u-bolt-padding-large t-bolt-xdark">Slide 1</div>
</bolt-carousel-slide>
<bolt-carousel-slide>
<div class="u-bolt-padding-large t-bolt-dark">Slide 2</div>
</bolt-carousel-slide>
<bolt-carousel-slide>
<div class="u-bolt-padding-large t-bolt-light">Slide 3</div>
</bolt-carousel-slide>
<bolt-carousel-slide>
<div class="u-bolt-padding-large t-bolt-xlight">Slide 4</div>
</bolt-carousel-slide>
</bolt-carousel>