Carousel with v-for and data question about bootstrap-vue HOT 3 CLOSED

<b-carousel id="infoscreen-carousel" :interval="3000" :indicators="false" :controls="false">
        <b-slide v-for="n in 10">
          <template v-if="events[n]">
            <div class="carousel-image">
              <img v-if="events[n].image" v-bind:src="events[n].image.raw" v-bind:alt="events[n].title" v-bind:title="events[n].title">
            </div>
            <div class="carousel-desc">
              <h2><a v-bind:href="events[n].url">{{ events[n].title | truncate(88) }}</a></h2>
              <p>
                <span>{{ events[n].all_oist_category }}</span>
                <span v-if="events[n].location">{{ events[n].location }}</span>
                <span>{{ events[n].start_date | unixToString }}</span>  
              </p>
              <p>{{ events[n].summary | cleanString | truncate(176) }}</p>
            </div>
          </template>
        </b-slide>
      </b-carousel>

<template>
  <b-row>
    <b-col>
      <b-carousel id="carousel1"
                  style="text-shadow: 1px 1px 2px #333;"
                  controls
                  indicators
                  background="#ababab"
                  :interval="4000"
                  img-width="1024"
                  img-height="480"
                  v-model="slide"
                  @sliding-start="onSlideStart"
                  @sliding-end="onSlideEnd"
      >

        <b-carousel-slide v-for="image in images" v-bind:img-src="image"></b-carousel-slide>

      </b-carousel>

      <p class="mt-4">
        Slide #: {{ slide }}<br>
        Sliding: {{ sliding }}
      </p>

      <div v-for="image in images">{{image}}</div>
    </b-col>
  </b-row>
</template>

<script>
export default {
  data () {
    return {
      images:
      [ 'https://lorempixel.com/1024/480/technics/2/'
      , 'https://lorempixel.com/1024/480/technics/8/'
      , 'https://lorempixel.com/1024/480/technics/5/'
      ]
    }
  }
}
</script>

<style scoped>
</style>