You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
3.2 KiB
108 lines
3.2 KiB
<template>
|
|
<div id="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>
|
|
|
|
|
|
export default {
|
|
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",
|
|
},
|
|
{
|
|
src: "/img/image_30.jpg",
|
|
title: "Alpy",
|
|
text: "Pohled na Rakouské alpy",
|
|
},
|
|
],
|
|
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 {
|
|
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>
|
|
|