CODEWITHSUNDEEP
vue.jsvuetify.js
Lucas Gabriel Lima
Lucas Gabriel Lima

Reputation: 63

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

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>

Upvotes: 4

Views: 3978

Answers (3)

hamid-davodi
hamid-davodi

Reputation: 1966

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.

Upvotes: 1

Dusan
Dusan

Reputation: 145

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

Upvotes: 1

Richard Strickland
Richard Strickland

Reputation: 1841

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

Upvotes: 0

Related Questions