vue-awesome-swiper 简单小实例

<template>
  <div :class="cname">
    <swiper :options="options" :not-next-tick="options.notNextTick">
      <swiper-slide v-for="(item,key) in items" :key="key">
        <a :href=item.scheme><img :src="item.pic" alt=""></a>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination" v-if="options.pagination"></div>
    </swiper>
  </div>
</template>

<script>
import {swiper, swiperSlide} from 'vue-awesome-swiper'

export default {
  name: 'CardType22',
  components: {
    swiper,
    swiperSlide
  },
  props: {
    cardData: {},
    cname: {
      type: String,
      default: ''
    },
    options: {
      type: Object,
      default: function () {
        return {
          history: false,
          autoplay: true,
          loop: true,
          pagination: {
            el: '.swiper-pagination'
          },
          notNextTick: false
        }
      }
    }
  },
  data () {
    return {
      items: []
    }
  },
  mounted () {
    this.items = this.cardData.pic_items
  }

}
</script>

<style scoped>
 img {
    border: 0;
    vertical-align: top;
    width: 100%;
  }

</style>