Search code examples
vue.jsvuetifyjs3

Vuetify carousel both next item and previous item from same direction

Trying to create a carousel with vuetify. Normally the next item and the previous item slide in from opposite direction. In my carousel I want next and previous item to slide in from same direction (both from left / both from right). I have experimented with reverse-transition but failed.

<template>
  <v-app>
    <v-container>
      <v-carousel>
        <v-carousel-item
          v-for="i in 5"
          src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
          cover
          reverse-transition="slide-x-transition"
        ></v-carousel-item>
      </v-carousel>
    </v-container>
  </v-app>
</template>
Solution

  • Use reverse-transition="v-window-x-transition" (or transition="v-window-x-reverse-transition"). Though it is missing in the list of Vuetify transitions (here), it is what v-window uses internally (see code).

    Here it is in a playground