vytvoreni komponenty

src/components/Carousel.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <div class="container">
+        <button class="arrow" v-on:click="index -= 1">&lt;</button>
+        <div class="carousel" v-if="images.length > 0">
+        <img :src="images[index].src" alt="">
+        </div>
+        <button class="arrow" v-on:click="index += 1">&gt;</button>
+    </div>
+    <h2>{{ images[index].title }}</h2>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+      images: {default: () => []}
+  },
+  data: function() {
+    return {
+      index: 0,
+    }
+  },
+  watch: {
+    index: function(value) {
+      let total = this.images.length - 1;
+      if (value < 0) {
+        this.index = total;
+      }
+      else if (value > total) {
+        this.index = 0;
+      }
+    }
+  }
+}
+</script>
+
+<style>
+  .active {
+    background-color: green;
+  }
+
+  .arrow{
+      height: 332px;
+  }
+
+  .container{
+    margin: 0 auto;
+    width: 600px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .carousel img{
+      width: 500px;
+      margin: 0 auto;
+  }
+
+  h2{
+      text-align: center;
+  }
+  
+</style>