forked from tomas.patolan/kolotoc
4 changed files with 117 additions and 74 deletions
@ -1,28 +1,53 @@ |
|||||
<template> |
<template> |
||||
<div id="app"> |
|
||||
<img alt="Vue logo" src="./assets/logo.png"> |
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/> |
|
||||
|
<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> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import HelloWorld from './components/HelloWorld.vue' |
|
||||
|
|
||||
|
import Carousel from './components/Carousel'; |
||||
|
import CarouselSlide from './components/CarouselSlide'; |
||||
export default { |
export default { |
||||
name: 'App', |
|
||||
components: { |
|
||||
HelloWorld |
|
||||
|
components:{ |
||||
|
Carousel, |
||||
|
CarouselSlide, |
||||
|
}, |
||||
|
data (){ |
||||
|
return{ |
||||
|
slides: [ |
||||
|
'https://picsum.photos/id/232/600/400', |
||||
|
'https://picsum.photos/id/220/600/400', |
||||
|
'https://picsum.photos/id/156/600/400', |
||||
|
], |
||||
|
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> |
</script> |
||||
|
|
||||
<style> |
<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; |
|
||||
} |
|
||||
|
.app{ |
||||
|
display:flex; |
||||
|
justify-content: center; |
||||
|
} |
||||
</style> |
</style> |
||||
|
|||||
@ -0,0 +1,57 @@ |
|||||
|
<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> |
||||
@ -0,0 +1,19 @@ |
|||||
|
<template> |
||||
|
<div v-show="visibleSlide === index" class="carousel-slide"> |
||||
|
<slot></slot> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
props: ['visibleSlide', 'index'], |
||||
|
data (){ |
||||
|
return{ |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
</style> |
||||
@ -1,58 +0,0 @@ |
|||||
<template> |
|
||||
<div class="hello"> |
|
||||
<h1>{{ msg }}</h1> |
|
||||
<p> |
|
||||
For a guide and recipes on how to configure / customize this project,<br> |
|
||||
check out the |
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>. |
|
||||
</p> |
|
||||
<h3>Installed CLI Plugins</h3> |
|
||||
<ul> |
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li> |
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li> |
|
||||
</ul> |
|
||||
<h3>Essential Links</h3> |
|
||||
<ul> |
|
||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li> |
|
||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li> |
|
||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li> |
|
||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li> |
|
||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li> |
|
||||
</ul> |
|
||||
<h3>Ecosystem</h3> |
|
||||
<ul> |
|
||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li> |
|
||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li> |
|
||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li> |
|
||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li> |
|
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li> |
|
||||
</ul> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
name: 'HelloWorld', |
|
||||
props: { |
|
||||
msg: String |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only --> |
|
||||
<style scoped> |
|
||||
h3 { |
|
||||
margin: 40px 0 0; |
|
||||
} |
|
||||
ul { |
|
||||
list-style-type: none; |
|
||||
padding: 0; |
|
||||
} |
|
||||
li { |
|
||||
display: inline-block; |
|
||||
margin: 0 10px; |
|
||||
} |
|
||||
a { |
|
||||
color: #42b983; |
|
||||
} |
|
||||
</style> |
|
||||
Loading…
Reference in new issue