How to change v-carousel scroll/slide transition speed?

user_4756600 0
Viewed 1788

I'm using a v-carousel with some images and I want the slides between the itens to be slower/smoother.

What would be an elegant way to do it?

<v-carousel interval="5000" :height="window.height - 48" hide-controls hide-delimiters>
                <v-carousel-item :src="congresso">
                </v-carousel-item>
                <v-carousel-item :src="stf">
                </v-carousel-item>
                <v-carousel-item :src="tse">
                </v-carousel-item>
</v-carousel>
vuetify.js vue.js
3 Answers
<b-carousel
      id="carousel-1"
      v-model="slide"
      :interval="1000"
      controls
      indicators
      background="#ababab"
      img-width="1024"
      img-height="480"
      style="text-shadow: 1px 1px 2px #333;"
      @sliding-start="onSlideStart"
      @sliding-end="onSlideEnd"
    >

I have just tried this and it works

interval is written like this :interval="nubmer" it has : so try to put that :

user_173289960

Add this to your variables.scss file:

.v-window {
  &-x-transition,
  &-x-reverse-transition,
  &-y-transition,
  &-y-reverse-transition {
    &-enter-active,
    &-leave-active {
      transition: 1.1s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
    }
  }
}

change the first param (here 1.1s) in the transition variable to set the overall speed.

*From https://github.com/vuetifyjs/vuetify/issues/7476

user_35282490

I did that with the help of Vuetify’s transition helper function that lets you to define your own transition.

First if you did not add variables.scss file into your project you must do that with the help of this link from official documentation. Then you can add your own custom transition to that file. Here I used the original fade-transition of vuetify and only changed the transition time:

/* the variables.scss file */

.new-transition {
&-leave-active {
  position: absolute;
}
&-enter-active, &-leave, &-leave-to {
  transition: 100ms; /* here you can define your desired time for transition */
}
&-enter, &-leave-to {
  opacity: 0
}
}

After that in your .vue file you can use createSimpleTransition of vuetify and register that in "mounted" hook as follow:

<template>
<section>
    <v-carousel>
    <v-carousel-item
      v-for="(item,i) in items"
      :key="i"
      :src="item.src"
      reverse-transition="new-transition"
      transition="new-transition"
    ></v-carousel-item>
  </v-carousel>
</section>
</template>

<script>
import { createSimpleTransition } from 'vuetify/lib/components/transitions/createTransition';

export default {
    name: 'Carousel',

    data () {
      return {
        items: [
          {
            src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg',
          },
          {
            src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg',
          },
          {
            src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg',
          },
          {
            src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg',
          },
        ],
      }
    },
    mounted() {
        const newTransition = createSimpleTransition('new-transition');
        this.$once("hook:components", () => {
            newTransition
        })
        
    }
}
</script>

Now you can use new-transition that were defined in your carousel and the time that you has set in variables.scss will affect in your carousel.

user_137709360
Related