Quasarでカルーセルを表示するサンプルコード

• 概要
• 環境
• サンプルコード
• ちょっと解説
• 参考サイト

概要

q-carousel の使い方をサンプルコード付きで紹介します
今回は q-btn-toggle を組み合わせて使います

環境

• macOS 11.7
• node 18.9.0
• quasar 2.8.2

サンプルコード

• vim src/pages/IndexPage.vue

<template>
  <div class="q-pa-md">
    <q-carousel
      v-model="slide"
      transition-prev="slide-right"
      transition-next="slide-left"
      animated
      swipeable
      control-color="primary"
      class="rounded-borders"
    >
      <q-carousel-slide name="style" class="column no-wrap flex-center">
        <q-icon name="style" color="primary" size="56px" />
        <div class="q-mt-md text-center">
          {{ one }}
        </div>
      </q-carousel-slide>
      <q-carousel-slide name="tv" class="column no-wrap flex-center">
        <q-icon name="live_tv" color="primary" size="56px" />
        <div class="q-mt-md text-center">
          {{ two }}
        </div>
      </q-carousel-slide>
      <q-carousel-slide name="layers" class="column no-wrap flex-center">
        <q-icon name="layers" color="primary" size="56px" />
        <div class="q-mt-md text-center">
          {{ three }}
        </div>
      </q-carousel-slide>
    </q-carousel>

    <div class="row justify-center">
      <q-btn-toggle
        glossy
        v-model="slide"
        :options="[
          { label: '1.', slot: 'one', value: 'style' },
          { label: '2.', slot: 'two', value: 'tv' },
          { label: '3.', slot: 'three', value: 'layers' },
        ]"
        @update:model-value="updateBtn"
      >
        <template v-slot:one>
          <div class="row items-center no-wrap">
            <div class="text-center">
              {{ one }}
            </div>
            <q-icon right name="style" />
          </div>
        </template>

        <template v-slot:two>
          <div class="row items-center no-wrap">
            <div class="text-center">
              {{ two }}
            </div>
            <q-icon right name="live_tv" />
          </div>
        </template>

        <template v-slot:three>
          <div class="row items-center no-wrap">
            <div class="text-center">
              {{ three }}
            </div>
            <q-icon right name="layers" />
          </div>
        </template>
      </q-btn-toggle>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const slide = ref('style');
const one = 'Hello One!'
const two = 'Hello Two!'
const three = 'Hello Three!'

const updateBtn = async(value) => {
  if (value == 'style') {
    console.log(value);
  }
}
</script>

ちょっと解説

q-carousel と q-btn-toggle に同じ v-model を設定することでボタンの選択に合わせてカルーセルを追従させることができます

swipeable を設定することでドラッグで移動することができるようになります

q-btn-toggle 側は今回は slot を使ってボタンをそれぞれテンプレートとして定義しています
この方がボタンに表示する内容を細かく定義できるのでおすすめです

q-btn-toggle のボタンが変わった場合のイベントは @update:model-value を使います
こうすることで options で定義した value の値を関数内で拾うことができるので押されたボタンの種類に応じて処理をわかることができます

参考サイト

• https://quasar.dev/vue-components/carousel#introduction