diff --git a/package-lock.json b/package-lock.json
index ce788f7..84f0978 100644
--- 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",
diff --git a/package.json b/package.json
index df16779..20a1309 100644
--- 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",
diff --git a/public/img/thumb_01.jpg b/public/img/thumb_01.jpg
new file mode 100644
index 0000000..7f10dcf
Binary files /dev/null and b/public/img/thumb_01.jpg differ
diff --git a/public/img/thumb_02.jpg b/public/img/thumb_02.jpg
new file mode 100644
index 0000000..ab88da3
Binary files /dev/null and b/public/img/thumb_02.jpg differ
diff --git a/public/img/thumb_03.jpg b/public/img/thumb_03.jpg
new file mode 100644
index 0000000..495d208
Binary files /dev/null and b/public/img/thumb_03.jpg differ
diff --git a/public/img/thumb_04.jpg b/public/img/thumb_04.jpg
new file mode 100644
index 0000000..3ea1dac
Binary files /dev/null and b/public/img/thumb_04.jpg differ
diff --git a/public/img/thumb_05.jpg b/public/img/thumb_05.jpg
new file mode 100644
index 0000000..515d560
Binary files /dev/null and b/public/img/thumb_05.jpg differ
diff --git a/src/App.vue b/src/App.vue
index 55df315..fc19c6b 100644
--- 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>