如何在Quasar中实现带Q-Parallax图片的Q-Carousel轮播

你当前的代码里，QParallax直接嵌套在QCarouselSlide中时，会因为轮播项的默认样式和视差组件的布局逻辑冲突，导致视差效果无法正常触发，同时也没法实现真正的全屏展示。下面是调整后的解决方案：

修改要点 #

• 移除QCarouselSlide上的column no-wrap flex-center类，这类布局类会限制QParallax的空间占比
• 给QParallax设置height: 100%，让它完全继承父容器（QCarouselSlide）的高度
• 去掉QCarousel的padding属性和bg-purple背景色，避免遮挡图片或产生多余间隙
• 确保QCarousel的height:100vh生效，让轮播容器占满整个视口高度

修改后的完整代码 #

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

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

const slide = ref('style')
</script>

关键细节说明 #

• QParallax的视差效果依赖于自身的高度和滚动触发，所以必须让它完全填充轮播项的空间，设置height:100%是核心
• QCarousel的padding属性会给轮播项添加内边距，导致图片无法全屏，所以要移除
• 如果需要在视差层上添加文字内容，可以直接放在QParallax的内部插槽里，比如：

  <q-parallax src="xxx.jpg" style="height:100%">
    <div class="absolute-center text-h2">轮播标题</div>
  </q-parallax>
  

内容的提问来源于stack exchange，提问作者Qiuzman