zmena

src/App.vue

@@ -1,54 +1,40 @@
 <template>
-  <div class="app">
-    <carousel @next="next" @prev="prev">
-      <carousel-slide v-for="(slide, index) in slides" :key="slide" :index="index" :visibleSlide = "visibleSlide">
-        <img :src="slide">
-      </carousel-slide>
-    </carousel>
+  <div id="app">
+    <h1>Kolotoč</h1>
+    <Kolotoc :images="images"/>
   </div>
 </template>
 
 <script>
-import Carousel from './components/Carousel';
-import CarouselSlide from './components/CarouselSlide';
+import Kolotoc from './components/Kolotoc'
 export default {
+  name: 'App',
   components:{
-    Carousel,
-    CarouselSlide,
+    Kolotoc
   },
-  data (){
-    return{
-      slides: [
-        'https://picsum.photos/id/232/600/400',
-        'https://picsum.photos/id/220/600/400',
-        'https://picsum.photos/id/156/600/400',
-        '/img/image_30.jpg'
+  data: function() {
+    return {
+      images: [
+        {
+          src: "/img/image_01.jpg",
+          title: "Obrázek 1"
+        },
+        {
+          src: "/img/image_02.jpg",
+          title: "Obrázek 2"
+        },
+        {
+          src: "/img/image_03.jpg",
+          title: "Obrázek 3"
+        }
       ],
-      visibleSlide: 0,
-    }
-  },
-  methods : {
-    next(){
-      if(this.visibleSlide >= this.slides.length - 1){
-        this.visibleSlide = 0;
-      }else{
-        this.visibleSlide++;
-      }
-    },
-    prev(){
-      if(this.visibleSlide <= 0){
-        this.visibleSlide = this.slides.length - 1;
-      }else{
-        this.visibleSlide--;
-      }
     }
   }
 }
 </script>
 
 <style>
-    .app{
-      display:flex;
-      justify-content: center;
-    }
+  .active {
+    background-color: green;
+  }
 </style>

src/components/Carousel.vue

@@ -1,57 +0,0 @@
-<template>
-  <div class="carousel">
-      <slot></slot>
-
-      <button @click="next" class="next">Next</button>
-      <button @click="prev" class="prev">Prev</button>
-  </div>
-</template>
-
-<script>
-export default {
-  data (){
-    return{
-
-    }
-  },
-  methods:{
-      next(){
-          this.$emit('next')
-      },
-      prev(){
-          this.$emit('prev')
-      }
-  }
-}
-</script>
-    
-<style>
-.carousel{
-    position: relative;
-    width: 600px;
-    height: 350px;
-    overflow: hidden;
-}
-button{
-    position: absolute;
-    height: 40px;
-    width: 50px;
-    top: calc(50% - 20px);
-    background-color: red;
-    border: none;
-    color: white;
-}
-
-button:focus, button:hover{
-    outline: none;
-    cursor: pointer;
-}
-
-.next{
-    right: 0;
-}
-
-.prev{
-    left: 0;
-}
-</style>

src/components/CarouselSlide.vue

@@ -1,19 +0,0 @@
-<template>
-  <div v-show="visibleSlide === index" class="carousel-slide">
-      <slot></slot>
-  </div>
-</template>
-
-<script>
-export default {
-    props: ['visibleSlide', 'index'],
-  data (){
-    return{
-
-    }
-  }
-}
-</script>
-
-<style>
-</style>

src/components/Kolotoc.vue

@@ -0,0 +1,42 @@
+
+<template>
+  <div>
+    <button v-on:click="index -= 1">&lt;</button>
+    <button v-on:click="index += 1">&gt;</button>
+    <div v-if="images.length > 0">
+      {{ images[index].src }}<br>
+      {{ images[index].title }}
+    </div>
+    <button v-on:click="index = i" v-for="(img, i) in images" :key="i" :title="img.title" v-bind:class="{active: i == index}"></button>
+  </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;
+  }
+</style>