bbb

src/App.vue

@@ -1,28 +1,61 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js 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>
-import HelloWorld from './components/HelloWorld.vue'
 
 export default {
   name: 'App',
-  components: {
-    HelloWorld
+  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>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+.active {
+  background-color: green;
 }
 </style>