如何在 Quasar 中使用 q-parallax 图像做 q-carousel答案

【问题标题】：How to do a q-carousel with q-parallax images in Quasar如何在 Quasar 中使用 q-parallax 图像做 q-carousel
【发布时间】：2023-01-30 18:29:36
【问题描述】：

我正在尝试为我的主页设置一个轮播，轮播带有一些全屏图像和视差效果。我是类星体的新手，但经常使用 vuetify，但最近切换到 Vue3，所以我想我会尝试使用类星体。但是，我正在努力做到这一点。我看到有一个用于 QCarouselSlide 的插槽，但我不确定如何为这个视差绑定它。

到目前为止我的代码如下：

 <template>
  <q-page padding="false">
    <q-carousel
      v-model="slide"
      swipeable
      animated
      navigation-position="left"
      navigation
      padding
      style="height:100vh"
      class="bg-purple text-white rounded-borders"
    >
      <q-carousel-slide name="style" class="column no-wrap flex-center">
        <q-parallax src="https://cdn.quasar.dev/img/parallax2.jpg"></q-parallax>
      </q-carousel-slide>
      <q-carousel-slide name="tv" class="column no-wrap flex-center">
        <q-parallax src="https://cdn.quasar.dev/img/parallax2.jpg"></q-parallax>
      </q-carousel-slide>
    </q-carousel>
  </q-page>
</template>

<script setup>
  import { ref } from 'vue'

  const slide = ref('style')

</script>

【问题讨论】：

标签： vuejs3 quasar-framework

【解决方案1】：

请参考以下codepen。

https://codepen.io/Pratik__007/pen/rNrrRxj

    <q-carousel-slide :name="1" class="column no-wrap">
      <div class="row fit">
        <q-parallax
          src="https://cdn.quasar.dev/img/parallax2.jpg"
        >
          <h1 class="text-white">Basic</h1>
        </q-parallax>
      </div>
    </q-carousel-slide>

【讨论】：