Pregunta: He instalado vue-owl-carousel . Está funcionando bien.

Tengo tres controles deslizantes allí, ahora mi problema -> Anima solo el primer contenido sobre el control deslizante, pero no los demás.

¿Cómo puedo gestionar que todos los controles deslizantes estén animados?

Plantilla :

 <template> <div class="carousel"> <carousel :autoplay="true" :nav="false" :loop="true" :items="1" :center="true" @changed="changed"> <div class="carousel-sld" v-for="items in sliderItems" v-bind:key="items.id"> <div class="carousel-img img-responsive"> <img v-bind:src="require('../assets/carousel_images/' + items.image)" alt="Image" /> </div> <div class="carousel-text"> <transition name="fade" appear v-on:after-enter="afterEnter" v-on:leave="leave"> <h1 class="animated" v-if="show">{{ items.caption }}</h1> </transition> <div class="carousel-btn"> <a class="btn" href=""><i class="fa fa-link"></i>{{ items.btnText }}</a> </div> </div> </div> </carousel> </div> </template>

Guion:

 <script> import carousel from 'vue-owl-carousel' export default { components: { carousel }, data () { return { sliderItems: [ {id:1, image: "carousel-6.jpg", caption: "GBeeTechive in Action", btnText: "Get Started"}, {id:2, image: "carousel-10.jpg", caption: "GBeeTechive in Action", btnText: "Get Started"}, {id:3, image: "carousel-9.jpg", caption: "GBeeTechive in Action", btnText: "Get Started"}, {id:4, image: "carousel-4.jpg", caption: "GBeeTechive in Action", btnText: "Get Started"} ], fadeInRight:"", show: true } }, } </script>