CODEWITHSUNDEEP
cssvue.jsvuetify.js
HanirTxZ
HanirTxZ

Reputation: 255

How to add parallax effect on a v-carousel?

I have a "v-carousel" with a bunch of images, now i want to add a parallax effect on it (like "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>

Upvotes: 0

Views: 484

Answers (1)

cmfc31
cmfc31

Reputation: 1508

Check this codesandbox I made: https://codesandbox.io/s/stack-70665623-50fyk?file=/src/components/Example.vue

You mean something like this? If so, all you need to do is use a v-parallax component instead of the v-img inside your v-carousel-item.

<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>

Upvotes: 1

Related Questions