Carousel

Quasar Carousel is a Vue Component which you can use to display more information with less real estate, using slides. Useful for creating Wizards too.

The Carousel height is determined by the slide with biggest height, unless the height prop is used.

Installation

Edit /quasar.conf.js:

framework: {
  components: [
    'QCarousel',
    'QCarouselSlide',
    'QCarouselControl'
  ],
}

Basic Usage

Here is a very basic example:

<q-carousel class="text-white">
  <q-carousel-slide class="bg-primary">
    Slide 1
  </q-carousel-slide>
  <q-carousel-slide class="bg-secondary">
    Slide 2
  </q-carousel-slide>
  <q-carousel-slide class="bg-tertiary">
    Slide 3
  </q-carousel-slide>
</q-carousel>

QCarousel (Parent)

QCarousel Vue Properties

Supports v-model which determines the slide number.

Vue Property	Type	Description
`color`	String	One from Quasar Color Palette. It determines the color of the out of the box Carousel controls (arrows, quick nav).
`arrows`	Boolean	Show navigation arrows.
`infinite`	Boolean	Infinite slides scrolling.
`autoplay`	Boolean/Number	Auto scrolls between slides. Works great along `infinite` prop (but `infinite` is not required). If used as a number, it represents the number of milliseconds between scrolls.
`quick-nav`	Boolean	Shows navigational dots at bottom.
`quick-nav-icon`	String	Icon to use instead of the navigational dots at bottom.
`no-swipe`	Boolean	Disable navigation by touch/mouse actions.
`handle-arrow-keys`	Boolean	Allow navigation with left and right arrow key. In this case, it’s best to render only one such Carousel at a time.
`easing`	Function	Easing function used when changing slide from autoplay or button press.
`swipe-easing`	Function	Easing function used when changing slide with a swipe.
`thumbnails`	Array	(v0.15.11+) Array of thumbnails pointing to “statics” folder. Check examples.
`thumbnails-horizontal`	Boolean	(v0.15.11+) Thumbnails get displayed horizontally.

QCarousel Vue Methods

Vue Method	Description
`next()`	Goes to next slide.
`previous()`	Goes to previous slide.
`goToSlide(slideNumber)`	Go to the desired slide. `slideNumber` is 0-based.

QCarousel Vue Events

Vue Event	Description
`@input(index)`	Emits the index of the current slide.
`@slide-trigger(oldIndex, newIndex, direction)`	Emitted before animating to the new slide.
`@slide(index, direction)`	Emits the index of the current slide and the direction of the slide after the transition animation finishes. Emits even if navigating to the same slide.
`@slide-direction('next'/'previous')`	Emitted when navigating to a slide, describing direction (next / previous).

QCarouselSlide (Child)

Vue Property	Type	Description
`img-src`	String	An image from statics folder. Example: ‘statics/mountaings.png’.

QCarouselControl (Child)

Vue Property	Type	Description
`position`	String	Position of the control: ‘top’, ‘top-right’, ‘top-left’, ‘bottom-right’, etc
`offset`	Array of 2 Numbers	Offset on horizontal and vertical (in pixels). Example (default value): `[18, 18]`.

Examples

<template>
  <q-carousel
    color="white"
    arrows
    height="400px"
  >
    <q-carousel-slide img-src="statics/mountains.jpg">
      <div class="absolute-bottom custom-caption">
        <div class="q-display-1">First stop</div>
        <div class="q-headline">Mountains</div>
      </div>
    </q-carousel-slide>
    <q-carousel-slide img-src="statics/parallax1.jpg">
      <div class="absolute-bottom custom-caption">
        <div class="q-display-1">Second stop</div>
        <div class="q-headline">Famous City</div>
      </div>
    </q-carousel-slide>
    <q-carousel-slide img-src="statics/parallax2.jpg">
      <div class="absolute-bottom custom-caption">
        <div class="q-display-1">Third stop</div>
        <div class="q-headline">Famous Bridge</div>
      </div>
    </q-carousel-slide>
  </q-carousel>
</template>

<style>
.custom-caption {
  text-align: center;
  padding: 12px;
  color: $grey-4;
  background: rgba(0, 0, 0, 0.5);
}
</style>

Carousel with image slides and thumbnails

Requires Quasar v0.15.11+

<q-carousel
  color="white"
  arrows
  quick-nav
  height="300px"
  :thumbnails="[
    'statics/mountains.jpg',
    'statics/parallax1.jpg',
    'statics/parallax2.jpg'
  ]"
>
  <q-carousel-slide img-src="statics/mountains.jpg" />
  <q-carousel-slide img-src="statics/parallax1.jpg" />
  <q-carousel-slide img-src="statics/parallax2.jpg" />
</q-carousel>

Horizontal thumbnails:

<q-carousel :thumbnails="...." thumbnails-horizontal>
  ...
</q-carousel>

### Infinite scroll, auto-play and custom Quick Navigation icon. Second slide has a Youtube video.
Use `infinite` Vue prop.

``` html
<q-carousel
  color="white"
  arrows
  quick-nav
  quick-nav-icon="favorite"
  infinite
  autoplay
  height="300px"
>
  <q-carousel-slide img-src="statics/mountains.jpg" />
  <q-carousel-slide>
    <q-video
      class="absolute-full"
      src="https://www.youtube.com/embed/k3_tw44QsZQ?rel=0"
    />
  </q-carousel-slide>
  <q-carousel-slide img-src="statics/parallax1.jpg" />
  <q-carousel-slide img-src="statics/parallax2.jpg" />
</q-carousel>

Third slide has a Youtube video.

<q-carousel
  color="white"
  quick-nav
  height="300px"
>
  <q-carousel-slide class="text-white bg-primary row flex-center">
    <div class="q-display-2">First Slide</div>
  </q-carousel-slide>
  <q-carousel-slide class="text-white bg-secondary row flex-center">
    <div class="q-display-2">Second Slide</div>
  </q-carousel-slide>
  <q-carousel-slide class="text-white bg-primary">
    <div v-for="n in 7" :key="`custom-${n}`" class="q-ma-sm">
      {{ lorem }}
    </div>
  </q-carousel-slide>
  <q-carousel-slide img-src="statics/mountains.jpg" />
  <q-carousel-slide>
    <q-video
      class="absolute-full"
      src="https://www.youtube.com/embed/k3_tw44QsZQ?rel=0"
    />
  </q-carousel-slide>
  <q-carousel-slide img-src="statics/parallax1.jpg" />
  <q-carousel-slide img-src="statics/parallax2.jpg" />

  <q-carousel-control slot="control-nav" slot-scope="carousel" :offset="[18, 52]">
    <q-btn
      @click="carousel.previous"
      :disable="!carousel.canGoToPrevious"
      color="amber" text-color="black"
      icon="keyboard_arrow_left"
      round dense
      class="q-mr-small"
    />
    <q-btn
      @click="carousel.next"
      :disable="!carousel.canGoToNext"
      color="amber" text-color="black"
      icon="keyboard_arrow_right"
      round dense
    />
  </q-carousel-control>

  <q-btn
    slot="quick-nav"
    slot-scope="props"
    color="white"
    flat
    dense
    :label="`${props.slide + 1}`"
    @click="props.goToSlide()"
    :class="{inactive: !props.current}"
  />
</q-carousel>

Using v-model & some custom controls: autoplay button, progressbar, fullscreen toggle

Controlling from outside of Carousel:
<q-btn
  rounded
  color="primary"
  @click="slide = 1"
  icon="arrow_downward"
  label="Navigate to second slide"
  class="q-ml-sm"
/>

<q-carousel
  v-model="slide"
  color="amber"
  quick-nav
  infinite
  :autoplay="autoplay"
  height="400px"
>
  <q-carousel-slide
    v-for="n in 7" :key="`car-${n}`"
    class="flex flex-center"
    :class="`bg-${colors[n % 5]}`"
  >
    <div class="text-center">
      <div class="q-display-3">Slide {{ n }}</div>
      <div>Slides can contain any content.</div>
    </div>
  </q-carousel-slide>

  <q-carousel-control
    slot="control"
    position="top-right"
    :offset="[18, 18]"
    class="text-white"
    style="background: rgba(0, 0, 0, .3); padding: 4px; border-radius: 4px"
  >
    <q-toggle dark color="amber" v-model="autoplay" label="Auto Play" />
  </q-carousel-control>

  <q-carousel-control
    slot="control-button"
    slot-scope="carousel"
    position="bottom-right"
    :offset="[18, 22]"
  >
    <q-btn
      round dense push
      color="amber"
      :icon="carousel.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
      @click="carousel.toggleFullscreen()"
    />
  </q-carousel-control>

  <q-carousel-control slot="control-progress" slot-scope="carousel" position="bottom" :offset="[42, 100]">
    <q-progress :percentage="carousel.percentage" stripe color="amber" :animate="autoplay" />
  </q-carousel-control>
</q-carousel>

Custom easing animation.

<template>
  <q-carousel
    class="text-white"
    :easing="overshoot"
    infinite
    autoplay
    arrows
    color="white"
    height="250px"
  >
    <q-carousel-slide
      v-for="n in 7" :key="`anim-${n}`"
      class="flex flex-center"
      :class="`bg-${colors[n % 5]}`"
    >
      <div class="q-display-3">Slide {{ n }}</div>
    </q-carousel-slide>
  </q-carouse>
</template>

<script>
import { easing } from 'quasar'
// easing is a collection;
// we're picking "overshoot" from it

export default {
  data () {
    return {
      overshoot: easing.overshoot
    }
  }
}
</script>

Launching on Fullscreen

Useful for creating Wizards.

<template>
  <div>
    <q-btn color="primary" class="glossy" @click="modal = true">
      Launch
    </q-btn>
    <q-modal v-model="modal" maximized>
      <q-carousel
        color="white"
        arrows
        quick-nav
        class="text-white full-height"
      >
        <q-carousel-slide
          v-for="n in 7" :key="`full-${n}`"
          class="flex flex-center"
          :class="`bg-${colors[n % 5]}`"
        >
          <div class="q-display-3">Step {{ n }}</div>
        </q-carousel-slide>

        <q-carousel-control
          slot="control-full"
          slot-scope="carousel"
          position="bottom-right"
          :offset="[18, 22]"
        >
          <q-btn
            rounded push
            color="amber"
            icon="close"
            label="Close me"
            @click="modal = false"
          />
        </q-carousel-control>
      </q-carousel>
    </q-modal>
  </div>
</template>

<script>
export default {
  data () {
    return { modal: false }
  }
}
</script>

Spinner Parallax

Components

Style & Identity

CSS Helpers

Layout

Buttons

Navigation

Form Components

Grouping

Popups

Progress

Media

Scrolling

Animation

Other Components

Touch/Mouse Actions

Utils

Web API Wrappers