2.5.3

Carousel

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: @bolt/components-button @bolt/core swiper

Bolt's Component Explorer is being upgraded. It'll return in a future release!

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)
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 `<bolt-carousel-slide>` automatically.	`array`	—	—
slides_per_view	Controls the number of slides to be shown at once.	`string`	`1`	`auto`, `1`, `2`, `3`, `4`
slides_per_group	Controls the number of slides to be swiped at once.	`string`	`auto`	`auto` or `1`
space_between	Controls the horizontal spacing between each slide.	`string`	`medium`	`none`, `small`, `medium`
nav_button_position	Positions the previous and next buttons to either inside or outside of the carousel container.	`string`	`inside`	`inside` or `outside`
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`	`true` or `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}}`	—

Overview

Usage

Schema

Props

Nav Button Position

Slides Per View

Autoplay

Demos

Basic Carousels

Advanced Carousels

Edit this page

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Nav Button Position: Inside

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Nav Button Position: Outside

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slides Per View: Auto

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slides Per View: 1

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slides Per View: 2

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slides Per View: 3

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slides Per View: 4

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Autoplay: true

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Autoplay: false

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

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

Band slide 1

Band slide 2

Band slide 3

Band slide 4

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

This is caption for image figure slide 1.

This is caption for image figure slide 2.

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.

Michael

There’s always money in the banana stand.

George

I don’t understand the question and I won’t respond to it.

Lucille

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.

This is band slide 1

Customer Success

Every enterprise success story starts with the right technology.

This is band slide 2

Web Component Usage

Bolt carousel is a web component, you can simply use <bolt-carousel> in the markup to make it render. For each slide, you must use <bolt-carousel-slide> to wrap around the slide content.

Slide 1

Slide 2

Slide 3

<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>

Basic Usage

The web component has all the options shown in the schema table. You can define each prop within the <bolt-carousel> element. Use unique combinations to customize a carousel to your liking.

Slide 1

Slide 2

Slide 3

Slide 4

<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>

Server-side Rendered Web Components (Experimental)

The <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!

Slide 1

Slide 2

Slide 3

{% 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 %}

carousel

carousel docs ▼

Carousel

Published

Bolt's Component Explorer is being upgraded. It'll return in a future release!

Overview

Install via yarn

Usage

Guidelines

Schema

Props

Demos

carousel ▼

carousel nav button position variations ▼

Nav Button Position: Inside

Nav Button Position: Outside

carousel slides per view variations ▼

Slides Per View: Auto

Slides Per View: 1

Slides Per View: 2

Slides Per View: 3

Slides Per View: 4

carousel autoplay variations ▼

Autoplay: true

Autoplay: false

carousel basic variations ▼

Basic Usage

A carousel of bands

A carousel of calls to action

This Is a Call to Action Headline 1

This Is a Call to Action Headline 2

This Is a Call to Action Headline 3

This Is a Call to Action Headline 4

This Is a Call to Action Headline 5

A carousel of cards

This is a card

This is a card

This is a card

This is a card

A carousel of images

A carousel of blockquotes

carousel advanced variations ▼

Advanced Usage

Card Carousel

This card's media has an image carousel

Hero Band Carousel

Experience The Best of Both Worlds

Customer Success

carousel with web component ▼

carousel docs

carousel

carousel nav button position variations

carousel slides per view variations

carousel autoplay variations

carousel basic variations

carousel advanced variations

carousel with web component