celkový push

4 years ago · c80c68570d
8 changed files with 145 additions and 21 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -8,7 +8,10 @@
      "version": "0.1.0",
      "dependencies": {
        "core-js": "^3.6.5",
-        "vue": "^2.6.11"
+        "vue": "^2.6.11",
+        "vue-carousel-3d": "^1.0.1",
+        "vue-easy-slider": "^5.3.4",
+        "vue-timers": "^2.0.4"
      },
      "devDependencies": {
        "@vue/cli-plugin-babel": "~4.5.0",
@ -13323,6 +13326,20 @@
      "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
      "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
    },
+    "node_modules/vue-carousel-3d": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/vue-carousel-3d/-/vue-carousel-3d-1.0.1.tgz",
+      "integrity": "sha512-Q50gIEB6plLdqYd3jLxte8RJsXNPQBcrRsgUey7nnaQ7TvtFoRu/4rpPP1FiihahE0v+IzVv8LLSSJxD+XrQVQ==",
+      "dependencies": {
+        "core-js": "^3.6.5",
+        "vue": "^2.6.11"
+      }
+    },
+    "node_modules/vue-easy-slider": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/vue-easy-slider/-/vue-easy-slider-5.3.4.tgz",
+      "integrity": "sha512-PCdc4A2nwK7eH4vZdK4HqZBd8hfEMGN1HsxzNRIaDGDL4xLW3zgN+7a+SBkQbe4mN9Uuf/K9yw2qDDRqYUZgtw=="
+    },
    "node_modules/vue-eslint-parser": {
      "version": "7.5.0",
      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.5.0.tgz",
@ -13532,6 +13549,11 @@
      "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
      "dev": true
    },
+    "node_modules/vue-timers": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/vue-timers/-/vue-timers-2.0.4.tgz",
+      "integrity": "sha512-QOEVdO4V4o9WjFG6C0Kn9tfdTeeECjqvEQozcQlfL1Tn8v0qx4uUPhTYoc1+s6qoJnSbu8f68x8+nm1ZEir0kw=="
+    },
    "node_modules/watchpack": {
      "version": "1.7.5",
      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
@ -16430,7 +16452,8 @@
      "version": "4.5.11",
      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.11.tgz",
      "integrity": "sha512-JBPeZLubiSHbRkEKDj0tnLiU43AJ3vt6JULn4IKWH1XWZ6MFC8vElaP5/AA4O3Zko5caamDDBq3TRyxdA2ncUQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
    },
    "@vue/cli-service": {
      "version": "4.5.11",
@ -16590,7 +16613,8 @@
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz",
      "integrity": "sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
    },
    "@vue/web-component-wrapper": {
      "version": "1.3.0",
@ -16805,7 +16829,8 @@
      "version": "5.3.1",
      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz",
      "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==",
-      "dev": true
+      "dev": true,
+      "requires": {}
    },
    "acorn-walk": {
      "version": "7.2.0",
@ -16845,13 +16870,15 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
      "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
    },
    "ajv-keywords": {
      "version": "3.5.2",
      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
    },
    "alphanum-sort": {
      "version": "1.0.2",
@ -25715,6 +25742,20 @@
      "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
      "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
    },
+    "vue-carousel-3d": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/vue-carousel-3d/-/vue-carousel-3d-1.0.1.tgz",
+      "integrity": "sha512-Q50gIEB6plLdqYd3jLxte8RJsXNPQBcrRsgUey7nnaQ7TvtFoRu/4rpPP1FiihahE0v+IzVv8LLSSJxD+XrQVQ==",
+      "requires": {
+        "core-js": "^3.6.5",
+        "vue": "^2.6.11"
+      }
+    },
+    "vue-easy-slider": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/vue-easy-slider/-/vue-easy-slider-5.3.4.tgz",
+      "integrity": "sha512-PCdc4A2nwK7eH4vZdK4HqZBd8hfEMGN1HsxzNRIaDGDL4xLW3zgN+7a+SBkQbe4mN9Uuf/K9yw2qDDRqYUZgtw=="
+    },
    "vue-eslint-parser": {
      "version": "7.5.0",
      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.5.0.tgz",
@ -25883,6 +25924,11 @@
      "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
      "dev": true
    },
+    "vue-timers": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/vue-timers/-/vue-timers-2.0.4.tgz",
+      "integrity": "sha512-QOEVdO4V4o9WjFG6C0Kn9tfdTeeECjqvEQozcQlfL1Tn8v0qx4uUPhTYoc1+s6qoJnSbu8f68x8+nm1ZEir0kw=="
+    },
    "watchpack": {
      "version": "1.7.5",
      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
--- a/package.json
+++ b/package.json
@ -9,7 +9,10 @@
  },
  "dependencies": {
    "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "vue": "^2.6.11",
+    "vue-carousel-3d": "^1.0.1",
+    "vue-easy-slider": "^5.3.4",
+    "vue-timers": "^2.0.4"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
--- a/public/img/thumb_01.jpg
+++ b/public/img/thumb_01.jpg
--- a/public/img/thumb_02.jpg
+++ b/public/img/thumb_02.jpg
--- a/public/img/thumb_03.jpg
+++ b/public/img/thumb_03.jpg
--- a/public/img/thumb_04.jpg
+++ b/public/img/thumb_04.jpg
--- a/public/img/thumb_05.jpg
+++ b/public/img/thumb_05.jpg
--- a/src/App.vue
+++ b/src/App.vue
@ -1,28 +1,103 @@
 <template>
  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <div v-on:click="backImg" class="arrow left">
+      <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background: new 0 0 512 512" xml:space="preserve" > <g> <g> <path d="M492,236H68.442l70.164-69.824c7.829-7.792,7.859-20.455,0.067-28.284c-7.792-7.83-20.456-7.859-28.285-0.068 l-104.504,104c-0.007,0.006-0.012,0.013-0.018,0.019c-7.809,7.792-7.834,20.496-0.002,28.314c0.007,0.006,0.012,0.013,0.018,0.019 l104.504,104c7.828,7.79,20.492,7.763,28.285-0.068c7.792-7.829,7.762-20.492-0.067-28.284L68.442,276H492 c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" /> </g> </g> </svg>
+    </div>
+    <div class="box-with-img">
+      <h1> {{ images[index].title }} </h1>
+      <img :src="images[index].src" alt="" />
+      <p> {{ images[index].text }} </p>
+    </div>
+    <div v-on:click="nextImg" class="arrow right">
+      <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background: new 0 0 512 512" xml:space="preserve" > <g> <g> <path d="M492,236H68.442l70.164-69.824c7.829-7.792,7.859-20.455,0.067-28.284c-7.792-7.83-20.456-7.859-28.285-0.068 l-104.504,104c-0.007,0.006-0.012,0.013-0.018,0.019c-7.809,7.792-7.834,20.496-0.002,28.314c0.007,0.006,0.012,0.013,0.018,0.019 l104.504,104c7.828,7.79,20.492,7.763,28.285-0.068c7.792-7.829,7.762-20.492-0.067-28.284L68.442,276H492 c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" /> </g> </g> </svg>
+    </div>
  </div>
 </template>

 <script>
-import HelloWorld from './components/HelloWorld.vue'
+

 export default {
-  name: 'App',
-  components: {
-    HelloWorld
+  name: "App",
+  data: function () {
+    return {
+      images: [
+        {
+          src: "/img/thumb_01.jpg",
+          title: "Titulek 1",
+          text: "Tohle je obrázek 1",
+        },
+        {
+          src: "/img/thumb_02.jpg",
+          title: "Titulek 2",
+          text: "Tohle je obrázek 2",
+        },
+        {
+          src: "/img/thumb_03.jpg",
+          title: "Titulek 3",
+          text: "Tohle je obrázek 3",
+        },
+        {
+          src: "/img/thumb_04.jpg",
+          title: "Titulek 4",
+          text: "Tohle je obrázek 4",
+        },
+        {
+          src: "/img/thumb_05.jpg",
+          title: "Titulek 5",
+          text: "Tohle je obrázek 5",
+        },
+      ],
+      index: 0,
+    };
+  },
+  methods: {
+    nextImg: function () {
+      this.index += 1;
+      if (this.index > this.images.length - 1) {
+        this.index = 0;
      }
+    },
+    backImg: function () {      
+      this.index -= 1;
+      if (this.index < 0) {
+        this.index = this.images.length - 1;
      }
+    },
+  },
+};
 </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;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 90vh;
+}
+.box-with-img {
+  width: 30%;
+  height: 50%;
+}
+.box-with-img img {
+  width: 100%;
+  height: 100%;
+}
+.arrow {
+  width: 50px;
+  height: 50%;
+  display: flex;
+  align-items: center;
+}
+.arrow.left {
+  padding-top: 37px;
+  padding-right: 15px;
+}
+.arrow.right {
+  padding-top: 37px;
+  padding-left: 15px;
+}
+.arrow.right svg {
+  transform: rotate(180deg);
 }
 </style>