kolotoc/src/App.vue

<template>
  <div id="app">
    <h1>Kolotoč</h1>
    <button v-on:click="index -= 1">&lt;</button>
    <button v-on:click="index += 1">&gt;</button>
    <div>
      {{ images[index].src }}<br>
      {{ images[index].title }}
    </div>
    <button v-on:click="index = i" v-for="(img, i) in images" :key="i" :title="image.title></button>
  </div>
</template>

<script>

export default {
  name: 'App',
  data: function() {
    return {
      image: [
        {
          src: "/images/image_01.jpg",
          title: "titulek",
          text:"Lorem upsum dolor sit amet"
        },
        {
          src: "images/image_02.jpg",
          title: "titulek",
          text:"Lorem upsum dolor sit amet"
        },
        {
          src: "images/image_03.jpg",
          title: "titulek",
          text:"Lorem upsum dolor sit amet"
        }
      ],
      index: 0
    }
  },
  methods: {

  },
  watch: {
    index: function(value) {
      let total = this.images.lenght - 1;
      if (value < 0) {
        this.index = 0;
      }
      else if (value > total) {
        this.index = 0;
      }
    }
  }
}
</script>

<style>
.active {
  background-color: green;
}
</style>