如何用类星体中的q视差图像做q-carousel

Question

我正在尝试为我的主页设置一个带有一些全屏图像和视差效果的旋转木马。我是类星体的新手，但经常使用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>

Answer 1

请参考以下代码。

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>