How to change duration of transition on q-carousel?

[huay7]

quasar provides serveral transitions on q-carousel?
how can i change duration of transition on q-carousel?
thank you very much

[charlieknoll]

I created custom transition css for a 3 second transition (I’m not sure if all of the css is necessary):

<style>
.q-carousel__slide {
  min-height: 100%;
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
}
.q-carousel__slides-container {
  height: 100%;
  background-color: black;
}

.q-transition--slide-fade-enter-active {
  transition: all 3s cubic-bezier(0.33, 1, 0.68, 1);
}
.q-transition--slide-fade-leave-active {
  transition: all 3s cubic-bezier(0.32, 0, 0.67, 0);
}
.q-transition--slide-fade-enter,
.q-transition--slide-fade-leave-to {
  opacity: 0;
  position: absolute;
}
</style>

Then set your props on the carousel:

      transition-next="slide-fade"
      transition-prev="slide-fade"

Also, be sure to have animations turned on in your OS.