Question: I have installed vue-owl-carousel. It's working fine.

I have three slider in there - now to my problem -> It anmiates only the first content over slider but not the others.

How can I manage that all sliders will be animated?

Template:

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

Script:

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