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

Question

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>

Answer 1

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.

Answer 2

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

Answer 3

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