如何在 v-carousel 上添加视差效果？

Question

我有一个带有一堆图像的“v-carousel”，现在我想在上面添加视差效果（比如“v-parallax”）。

<v-carousel cycle height="600" hide-delimiter-background show-arrows-on-hover>

    <v-carousel-item v-for="(slide, i) in slides" :key="i" eager>
         <v-img :src="slide.src" height="100%"/>
    </v-carousel-item>
</v-carousel>

Answer 1

检查我制作的这个codesandbox：https://codesandbox.io/s/stack-70665623-50fyk?file=/src/components/Example.vue

你的意思是这样的？如果是这样，您需要做的就是在 v-carousel-item.

中使用 v-parallax 组件而不是 v-img

<v-carousel
   cycle
   height="400"
   hide-delimiter-background
   show-arrows-on-hover
>
   <v-carousel-item
   v-for="(slide, i) in slides"
   :key="i"
   eager
   >
      <v-parallax :src="slide.src"></v-parallax>                 
   </v-carousel-item>
</v-carousel>

如何在 v-carousel 上添加视差效果？

How to add parallax effect on a v-carousel?

css

vue.js

vuetify.js