<template>

<swiper :options="swiperOption">

</swiper>

</template>

<script>

import {swiper} from 'vue-awesome-swiper'

export default{

name:'MeSlider',

components:{

swiper

},

props:{

direction:{

type:String,

default:'horizontal',

validator(value){

return [

'horizontal',

'vertical'

].indexOf(value)>-1

}

},

interval:{

type:Number,

default:3000,

validator(value){

return value>=0;

}

},

loop:{

type:Boolean,

default:true

},

pagination:{

type:Boolean,

default:true

}

},

data(){

return{

swiperOption:{

watchOverflow:true,

direction:this.direction,

autoplay:this.interval?{

delay:this.interval,

disableOnInteration:false}:false,

slidersPerview:1,

loop:this.loop,

pagenation:{

el:this.pagenation?'.swiper-pagination':null

}

}

};

}

};

</script>

<style scoped="">

</style>

<template>

 <div class="slider-wapper">

<me-slider 

:direction:="direction"

:loop="loop"

:interval="interval"

:pagination="pagination"

>

<swiper-slide v-for="(item,index) in sliders"  :key="index">

<a :href="item.linkUrl" class="slider-link">

<img :src="item.picUrl" class="slider-img">

</a>

</swiper-slide>

</me-slider>

</div>

</template>

<script>

import MeSlider from 'base/slider'

import {swiperSlide} from 'vue-awesome-swiper'

export default{

name:'HomeSlider',

components:{

MeSlider,

swiperSlide

},

data(){

return{

direction:"vertical",

loop:false,

interval:0,

pagination:"pagination",

sliders:[

{

         'linkUrl':'https://www.imooc.com',

         'picUrl':require('./1.jpg')

        },

        {

         'linkUrl':'https://www.imooc.com',

         'picUrl':require('./2.jpg')

        },

        {

         'linkUrl':'https://www.imooc.com',

         'picUrl':require('./3.jpg')

        },

        {

         'linkUrl':'https://www.imooc.com',

         'picUrl':require('./4.jpg')

        }

]

}

}

};

</script>

<style scoped="">

</style>