Carousel

The QCarousel component allows you to display more information with less real estate, using slides. Useful for creating Wizards or an image gallery too.

Installation

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

Usage

TIP

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.

WARNING

Please take notice of the Boolean keep-alive prop for QCarousel, if you need this behavior. Do NOT use Vue’s native <keep-alive> component over QCarouselSlide.

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.

Basic

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).
Transitions, bottom navigation, arrows and auto padding

Vertical

Vertical mode

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.

Control Type
Navigation position

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:

Padding

Media content

Image slides
Multi-image slides
Captions
Video slides

In the example below there are thumbnails being generated automatically. Thumbnails only applies to image slides.

Thumbnails

TIP

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

Autoplay

Controls

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.

With QScrollArea and padding
With QScrollArea on whole slide

Fullscreen

Fullscreen

QCarousel API

Loading API...
Please wait...

QCarouselControl API

Loading API...
Please wait...

QCarouselSlide API

Loading API...
Please wait...