Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vue slide

Related:
Vue: Step-By-Step Guide To Mastering Vue.js From Beginner To Advanced (Vue.js, Learning Vue js 2)

Image slider component for vue js. This component adds an image slideshow to your vue app. You can specify the images to show in a JSON array.

Component name: vue-slide


vue slider

Installation

You need npm to install this component.

npm

shell
$ npm install vue-slide

Vue slider

Basic
Add this code to your template:

<rd-swipe :swipe="swipe">
<div
class="rd-swipe-item"
:style="{ 'background-image': `url(${img})` }"
v-for="(img, index) in imgs">
</div>
</rd-swipe>

Then create the script, define the images to show by url.

<script>
import rdSwipe from 'vue-slide'
export default {
data () {
return {
swipe: {
activeIndex: 0
},
imgs: [
'http://covteam.u.qiniudn.com/test18.jpg',
'http://covteam.u.qiniudn.com/test19.jpg',
'http://covteam.u.qiniudn.com/test20.jpg',
'http://covteam.u.qiniudn.com/test21.jpg'
]
}
}
}
</script>

Advanced
An advanced example below:

<template>
<div id="app">
<div class="swiper-box">
<div class="contacts">
<div
class="contact"
:class="{ 'active': index === swipe.activeIndex }"
v-for="(contact, index) in contacts"
@click="turnTo(index)"
>

</div>
</div>
<rd-swipe :swipe="swipe">
<div class="rd-swipe-item" :style="{ 'background-image': `url(${img})` }" v-for="(img, index) in imgs">
</div>
</rd-swipe>
</div>
</div>
</template>

<script>
import rdSwipe from './Slide.vue'
export default {
data () {
return {
swipe: {
activeIndex: 0
},
contacts: [{
text: 'Page 1'
}, {
text: 'Page 2'
}, {
text: 'Page 3'
}, {
text: 'Page 4'
}],
imgs: [
'http://covteam.u.qiniudn.com/test18.jpg',
'http://covteam.u.qiniudn.com/test19.jpg',
'http://covteam.u.qiniudn.com/test20.jpg',
'http://covteam.u.qiniudn.com/test21.jpg'
]
}
},
components: {
rdSwipe
},
methods: {
turnTo (index) {
this.$children.map(swipe => {
if (swipe.turnTo) {
swipe.turnTo(index)
}
})
}
}
}
</script>

Github: http://github.com/hilongjw/vue-slide#readme


© vuejsexamples.net - Privacy Policy - Cookie Policy