kolotoc

package-lock.json

@@ -4458,6 +4458,11 @@
         }
       }
     },
+    "dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -5639,6 +5644,15 @@
       "integrity": "sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=",
       "dev": true
     },
+    "global": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+      "requires": {
+        "min-document": "^2.19.0",
+        "process": "^0.11.10"
+      }
+    },
     "globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -7243,6 +7257,14 @@
       "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
       "dev": true
     },
+    "min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
+      "requires": {
+        "dom-walk": "^0.1.0"
+      }
+    },
     "mini-css-extract-plugin": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz",
@@ -8801,8 +8823,7 @@
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
-      "dev": true
+      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
     },
     "process-nextick-args": {
       "version": "2.0.1",
@@ -10940,6 +10961,23 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
       "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
     },
+    "vue-carousel": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/vue-carousel/-/vue-carousel-0.18.0.tgz",
+      "integrity": "sha512-a2zxh7QJioDxNMguqcuJ7TPbfgK5bGDaAXIia7NWxPAWsEvNE4ZtHgsGu40L5Aha4uyjmNKXvleB14QAXFoKig==",
+      "requires": {
+        "global": "^4.3.2",
+        "regenerator-runtime": "^0.12.1",
+        "vue": "^2.5.17"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
+        }
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.5.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.5.0.tgz",

package.json

@@ -9,7 +9,8 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "vue": "^2.6.11",
+    "vue-carousel": "^0.18.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/App.vue

@@ -1,28 +1,138 @@
 <template>
+
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <h1>Kolotoč</h1>
+     <div class="kolotoc">
+       <button v-on:click="dopredu">(====</button>
+       <button v-on:click="dozadu">===)</button>
+       <br>
+        <div class="obraz">
+            <img :src="images[index].src" alt="" />
+            <br>
+            <h1><span>{{ images[index].title }}</span></h1>
+      
+            <h1><span>{{ images[index].text }}</span></h1>
+        </div>
+        
+       
+
+    </div>
   </div>
+ 
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+
 
 export default {
+ 
   name: 'App',
-  components: {
-    HelloWorld
-  }
+  data: function() {
+    return {
+      images: [
+        {
+        src: "/img/jedna.jpg",
+        title: "nadpis 1",
+        text: "koral"
+        },
+         {
+        src: "/img/dva.jpg",
+        title: "nadpis 2",
+        text: "pisek"
+        },
+         {
+        src: "/img/tri.jpg",
+        title: "nadpi 3",
+        text: "voda",
+        }
+
+      ],
+      index: 0
+    }
+
+  },
+  methods: {
+    
+    dozadu: function () {      
+      this.index -= 1;
+      if (this.index < 0) {
+        this.index = this.images.length - 1;
+      }
+    },
+    dopredu: function () {
+      this.index += 1;
+      if (this.index > this.images.length - 1) {
+        this.index = 0;
+      }
+    },
+  },
+
+
+ 
+
+ 
 }
+
 </script>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+img {
+  width: 60%;
+  display: block;
+  margin: 0px auto;
+
+}
+span{
+  font-family: 'Courier New', Courier, monospace;
+}
+button{
+  background-color: rgb(86, 166, 219);
+  width: 20%;
+  height: 30px;
+  display: block;
+  margin: 0px auto;
+  
+  
+}
+#app{
+  margin: 0 auto;
+  width: 50%;
+  background-color: chocolate;
+
+}
+h1{
   text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
 }
+@media (max-width: 500px) {
+   img {
+  width: 100%;
+  display: block;
+  margin: 0px auto;
+
+}
+span{
+  font-family: 'Courier New', Courier, monospace;
+}
+button{
+  background-color: rgb(86, 166, 219);
+  width: 50%;
+  height: 30px;
+  display: block;
+  margin: 0px auto;
+  
+  
+}
+#app{
+  margin: 0 auto;
+  width: 50%;
+  background-color: chocolate;
+
+}
+h1{
+  text-align: center;
+}
+    
+}
+
+
 </style>

src/main.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import App from './App.vue'
 
+
 Vue.config.productionTip = false
 
 new Vue({