Carousel
A web-component powered carousel component for cycling through a series of content such as images, text, or cards.
{% 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}}
|
|
Advanced Schema Options
|
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-carouselSlides 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.
<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><bolt-carousel> component, among many other web components in Bolt, will support server-side rendering via the new upcoming {% filter bolt_ssr %} custom Twig filter. Check out the docs on server-side rendering for information!
{% filter bolt_ssr %}
<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>
{% endfilter %}