blob: 4a3702ee08abf563a5403cec05d71cbf6e27900f [file] [log] [blame]
<template>
<div>
<slider class="slider" interval="3000" auto-play="true">
<div class="frame" v-for="img in imageList">
<image class="image" resize="cover" :src="img.src"></image>
</div>
</slider>
</div>
</template>
<style scoped>
.image {
width: 700px;
height: 300px;
}
.slider {
margin-top: 25px;
margin-left: 25px;
width: 700px;
height: 300px;
border-width: 2px;
border-style: solid;
border-color: #41B883;
}
.frame {
width: 700px;
height: 300px;
position: relative;
}
</style>
<script>
export default {
data () {
return {
imageList: [
{ src: 'https://gw.alicdn.com/tfs/TB1SA2wQXXXXXXDapXXXXXXXXXX-1400-600.png'},
{ src: 'https://gw.alicdn.com/tfs/TB1KS_OQXXXXXcSXVXXXXXXXXXX-1400-600.png'},
{ src: 'https://gw.alicdn.com/tfs/TB1Ez7XQXXXXXbNXXXXXXXXXXXX-1400-600.png'},
{ src: 'https://gw.alicdn.com/tfs/TB1XLn6QXXXXXb2XpXXXXXXXXXX-1400-600.png'}
]
}
}
}
</script>