Provides a way to display a series of slides that can be interacted with on both mobile and desktop.
The Carousel can be operated using:
Content should be in the form of HTML wrapped by the q2-carousel-pane element.
Any kind of HTML will be accepted in each q2-carousel-pane. But you should keep the content of each slide simple, with calls to action that are easy for users to focus on. If the content is too complicated, you risk your audience missing your message or intent.
When considering the particular configuration you need to best achieve your goals, first decide if you want your Carousel implementation to autoplay, or start carouseling through content without user input (perhaps it's a carousel of ads). If so, then you have more leniency as to which configuration combination works the best. But we recommend always displaying the pagination dots to help users grasp the scale of the Carousel content at a glance.
If your Carousel is set to fullWidthPanes: true and hidePagination: true then users may not know there is other content to browse to. This can cause "dead ends" in the User Experience that we want you to avoid. If you are using the Carousel with fullWidthPanes: true, it is recommended you also set autoPlay: true.
By default, if your instance of <q2-carousel> has more than five panes provided, the component will automatically enable dynamic indicators. While in this state, only up to five indicator bubbles will be visible. Regular-sized bubbles will indicate the active pane and its directly adjacent panes, but the two beyond that will be slightly smaller. This is to indicate to the user that there is more beyond what is currently visible in either direction.
The q2-carousel element has one or more properties that support text localization. Those properties are indicated by the localizable badge in the description.
autoPlayauto-playEnables the auto-play feature and starts the carousel without user input.
framelessPanesframeless-panesDisplay the carousel panes as frameless with no container or shadow.
fullWidthPanesfull-width-panesDisplay the carousel panes full-width rather than with peeking content.
hidePaginationhide-paginationHide the dots below the carousel that provide navigation control and indicate which page is currently active.
indexThe currently displayed carousel pane.
labelThe label that is associated with the carousel. This is not displayed visually, but is presented by screen readers.
showNavigationArrowsshow-navigation-arrowsDisplay navigation arrow buttons as another way to navigate the carousel.
The q2-carousel element exposes events that can be used to send and receive data from the component based on user interaction.
Emitted when the displayed carousel pane changes.
{ index: number; }The q2-carousel element exposes methods that can be used to perform various actions on the component.
Clicks and Focuses the q2-carousel-pane matching the specified index.
selectCarouselPane(index: number) => Promise<void>Clicks and Focuses the <button> that controls playing or pausing the auto-play feature of the carousel.
togglePlayPause() => Promise<void>If the autoPlay property is not enabled, this method does nothing.
Initial Release
We follow Neilsen Norman Group's guidance and discourage the use of more than five carousel panes at a time, as ideally, you want to keep your users' focus on a few things to choose from. However, if your carousel relies on more than five panes, the pagination dots will respond accordingly and only show the active pane and its adjacent pane options.
Here is some custom content. You can add almost any markup you want.
Add Your Own Markup
Add Your Own Styles
Last Carousel Pane
Here is some custom content. You can add almost any markup you want.
Here is some custom content. You can add almost any markup you want.
<q2-carousel>
<q2-carousel-pane>
<h2>Carousel Pane 1</h2>
<p>Here is some custom content. You can add almost any markup you want.</p>
</q2-carousel-pane>
<q2-carousel-pane>
<h2>Carousel Pane 2</h2>
<p>Add Your Own Markup</p>
<q2-btn intent="workflow-primary">
Take Action
</q2-btn>
<q2-btn intent="workflow-primary">
Take Action
</q2-btn>
</q2-carousel-pane>
<q2-carousel-pane>
<h2>Carousel Pane 3</h2>
<p>Add Your Own Styles</p>
<q2-btn intent="workflow-primary">
Take Action
</q2-btn>
</q2-carousel-pane>
<q2-carousel-pane>
<h2>Carousel Pane 4</h2>
<p>Last Carousel Pane</p>
</q2-carousel-pane>
<q2-carousel-pane>
<h2>Carousel Pane 5</h2>
<p>Here is some custom content. You can add almost any markup you want.</p>
</q2-carousel-pane>
<q2-carousel-pane>
<h2>Carousel Pane 6</h2>
<p>Here is some custom content. You can add almost any markup you want.</p>
</q2-carousel-pane>
</q2-carousel>If you only have one carousel pane in your carousel, the single pane will be displayed but without pagination or navigation controls.
This is the only content pane in this carousel.
<q2-carousel>
<q2-carousel-pane>
<h2>Carousel Pane 1</h2>
<p>This is the only content pane in this carousel.</p>
</q2-carousel-pane>
</q2-carousel>If, however, you do not include any carousel panes in your carousel, the carousel will warn you, because what good is a carousel with no content to browse?
<q2-carousel></q2-carousel>The following CSS variables are available to override the default theme styles of the q2-carouselcomponent.
Many Tecton components consume other components to maintain visual and functional consistency. If you are looking for a CSS variable you think should exist but are not seeing it, it may be defined in one of the dependent components below. Either way, if you think it's something we should expose more conveniently, let us know!