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


// quasar.conf.js

return {
  framework: {
    // not needed if using auto-import feature:
    components: [
      'QCarousel',
      'QCarouselControl',
      'QCarouselSlide'
    ]
  }
}

Usage

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.

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



TIP

In the example below there are just a few transitions demoed. For a complete list of transitions, head to the Transitions page.

Transitions, bottom navigation, arrows and auto padding



TIP

In the examples above, you can also swipe with your finger (or swiping with the mouse – clicking and quickly dragging to left/right then releasing).

Media content

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 with thumbnails as it supercedes and thumbnails will not be displayed.

Infinite and autoplay

Autoplay



Controls

Controls



Fullscreen

Fullscreen



QCarousel API

QCarouselControl API

QCarouselSlide API