<template>
<div class="scroll">

<swiper :options="swiperOption" ref="mySwiper">
  <!-- slides -->
  <swiper-slide v-for="(item,index) in slidePic" :key="index"><img :src="item.src" alt="">                        </swiper-slide>
  <!-- Optional controls -->
  <div class="swiper-pagination "  slot="pagination"></div>
  <div class="swiper-button-prev swiper-button-black" slot="button-prev"></div>
  <div class="swiper-button-next swiper-button-black" slot="button-next"></div>
</swiper> 

</div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
name: 'HelloWorld',
components: {

  swiper,  
  swiperSlide  

},
data () {

return {
  slidePic :[
      {src:'../assets/banner/timg1.jpg'},
      {src:'../assets/banner/timg2.jpg'},
      {src:'../assets/banner/timg3.jpg'},
      {src:'../assets/banner/timg4.jpg'},
    ],
   swiperOption: {  
      notNextTick: true,
      //循环
      loop:true,
      //设定初始化时slide的索引
      initialSlide:0,
      //自动播放
      // autoplay:true,
      autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
      },
      // 设置轮播
      effect : 'flip',
      //滑动速度
      speed:800,
      //滑动方向
      direction : 'horizontal',
      //小手掌抓取滑动
      // grabCursor : true,
      //滑动之后回调函数
      on: {
          slideChangeTransitionEnd: function(){
            // console.log(this.activeIndex);//切换结束时，告诉我现在是第几个slide
          },
      },
      //左右点击
      navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
      },
      //分页器设置         
      pagination: {
          el: '.swiper-pagination',
          clickable :true
      }
    }
}

},
// props:['slidePic'],
computed: {

swiper() {  
  return this.$refs.mySwiper.swiper;  
}  

},
mounted () {

}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
.swiper-slide{
height:200px;
}

</style>

图片显示不出来 不知道是不是传的不对

因为下面这样引入图片就没问题 上面的动态引入不显示
<swiper-slide ><img src="../assets/banner/timg1.jpg" alt=""></swiper-slide>
<swiper-slide ><img src="../assets/banner/timg2.jpg" alt=""></swiper-slide>
<swiper-slide ><img src="../assets/banner/timg3.jpg" alt=""></swiper-slide>
<swiper-slide ><img src="../assets/banner/timg4.jpg" alt=""></swiper-slide>