<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,
      //循環(huán)
      loop:true,
      //設(shè)定初始化時slide的索引
      initialSlide:0,
      //自動播放
      // autoplay:true,
      autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
      },
      // 設(shè)置輪播
      effect : 'flip',
      //滑動速度
      speed:800,
      //滑動方向
      direction : 'horizontal',
      //小手掌抓取滑動
      // grabCursor : true,
      //滑動之后回調(diào)函數(shù)
      on: {
          slideChangeTransitionEnd: function(){
            // console.log(this.activeIndex);//切換結(jié)束時，告訴我現(xiàn)在是第幾個slide
          },
      },
      //左右點(diǎn)擊
      navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
      },
      //分頁器設(shè)置         
      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>

圖片顯示不出來 不知道是不是傳的不對

因?yàn)橄旅孢@樣引入圖片就沒問題 上面的動態(tài)引入不顯示
<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>