[Vuejs]-Stop vue carousel image from sliding in on load

0👍

It’s simple if you want your slides without any transition, just do:

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

0👍

I don’t know if it’s the right way, but this is how I solved the problem:

     <template>
        <v-carousel v-if="show"
          :cycle="cycle"
        >
          <v-carousel-item
            v-for="(item,i) in items"
            :key="i"
            :src="item"
          ></v-carousel-item>
        </v-carousel>
     <template>
     <script>
        export default {
          data () {
            return {
              cycle: false
            }
          }
        }
     </script>
👤Luca

0👍

this is not the default behaviour
it might happen when your carousel-item components are keyed the wrong way

for example:
wrong (will trigger re-render whenever the image id changes):

<v-carousel-item
   v-for="(productImage, index) in productImages"
   :key="productImage.id"
>

right:

<v-carousel-item
   v-for="(productImage, index) in productImages"
   :key="index"
>

Leave a comment