vue-awesome-swiper 简单轮播图

import VueAwesomeSwiper from ‘vue-awesome-swiper‘
import ‘swiper/css/swiper.css‘
Vue.use(VueAwesomeSwiper)

import {Swiper, SwiperSlide} from ‘vue-awesome-swiper‘
import ‘swiper/css/swiper.css‘

<template>
  <swiper ref="mySwiper" :options="swiperOptions">
    <swiper-slide v-for="(item,index) of banners" :key="index">
      <img :src="item.icon" ref="icon">
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<style scoped>
  .swiper-slide {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .swiper-container {
    /*--swiper-theme-color: #ff6600;*/
    --swiper-pagination-color: #00ff33; /* 两种都可以 */
  }
</style>

  //import {Swiper, SwiperSlide} from ‘vue-awesome-swiper‘
  //import ‘swiper/css/swiper.css‘

  export default {
    name: "Banner",
    // components: {
    //   Swiper,
    //   SwiperSlide
    // },
    computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper
      }
    },
    props: {
      banners: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {
        swiperOptions: {
          pagination: {
            el: ‘.swiper-pagination‘,
            clickable: true,
            type: ‘bullets‘
          },
          init: true,
          loop: true,
          initialSlide: 0,
          autoplay: {
            delay: 5000,
            disableOnInteraction: false
          },
          speed: 800,
          direction: "horizontal",
          on: {
            click: () => {
              this.$emit(‘itemClick‘,this.swiper.activeIndex)
            }
          }
        }
      }
    },
    methods: {
    },
    mounted() {
    }
  }