The QCarousel component allows you to display more information with less real estate, using slides. Useful for creating Wizards or an image gallery too.
Usage
If the QCarouselSlide content also has images and you want to use swipe actions to navigate, you might want to add draggable="false" to them, otherwise the native browser behavior might interfere in a negative way.
- Please take notice of the Boolean
keep-aliveprop for QCarousel, if you need this behavior. Do NOT use Vue’s native<keep-alive>component over QCarouselSlide. - Should you need the
keep-alive-includeorkeep-alive-excludeprops then the QCarouselSlidenames must be valid Vue component names (no spaces allowed, don’t start with a number etc).
Basic
Below is an almost stripped down basic Carousel (it is just animated and only has custom transitions specified) with no navigation embedded. For this reason, we are controlling the current slide through the model.
Transitions
In the example below:
- There are just a few transitions demoed. For a complete list of transitions, head to the Transitions page.
- You can also swipe with your finger (or swiping with the mouse – clicking and quickly dragging to left/right then releasing).
Vertical
Control type
The notion of “control” here refers to the arrows and navigation buttons. Since they are buttons, you can also pick their type to better match your design. You also benefit from the control-color and control-text-color props.
Navigation position
Custom navigation
For a full list of properties of the navigation-icon slot, please consult the API card.
Accessibility v2.25+
The navigation buttons (or thumbnails) render as a tablist with aria-orientation matching the carousel direction; each of them is a tab with a roving tabindex, aria-selected and its slide’s name as accessible name, while each slide is a tabpanel. The previous/next arrows are buttons with localized accessible names from the Quasar Language Pack.
Two limits to design around: a swipe-only carousel — no arrows and no navigation/thumbnails — offers no keyboard way at all to change slides, so always enable at least one of them. And autoplay does not pause on hover or focus, so when using it provide a pause control (e.g. a button toggling the autoplay prop) — WCAG 2.2.2 requires a way to stop the movement.
Keyboard navigation
The navigation buttons (and the thumbnails, when using the thumbnails prop) follow the WAI-ARIA carousel pattern with a tabbed interface: they form a single Tab stop, while the arrow keys move focus within them and also select the newly focused slide, wrapping around at either end. Horizontal carousels use Arrow Left and Arrow Right (reversed in RTL mode); vertical ones use Arrow Up and Arrow Down. Home or End jumps to the first or last slide.
Each navigation element gets its slide’s name as the accessible label — pick meaningful slide names, or supply your own labels through the navigation-icon slot (spread its btnProps, which include the ARIA attributes, then override what you need). The previous/next arrows (arrows prop) carry localized accessible names from the Quasar Language Pack (carousel.prevSlide / carousel.nextSlide).
Auto padding
Below is an example with which you can play with different QCarousel settings so you can see the padding (or lack of) in action:
Media content
In the example below there are thumbnails being generated automatically. Thumbnails only applies to image slides.
Don’t use the property navigation along with thumbnails as the first supercedes the latter so the thumbnails will not be displayed.
Infinite and autoplay
You can pause autoplay when the pointer is over the carousel or over a region of interest.
Controls
With QScrollArea
Please note how QScrollArea is used in the two examples below. Also note the q-carousel--padding CSS helper class in the second example.