vue-awesome-swiper 简单轮播图

先安装 npm install swiper vue-awesome-swiper --save

这里使用的swiper使用的是swiper5.x版本   使用6.x分页器不显示，很多配置都没有效果

使用全局引入 

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">
      <!--  loop为true的情况下不能使用vue-loadload加载图片会出现问题 -->
      <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>

 

 

js代码

//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.swiper.realIndex 选中的索引(对应我们传入的banners集合)
              //loop为true时轮播图前后会添加滑动时的占位图片
              //所以会多出2张图片 这里的索引就和数据对应不上了
              //所以需要使用realInedx
              //this.swiper.activeIndex 选中的索引(这里是当前真实dom的索引)
              this.$emit('itemClick',this.swiper.realIndex)
            }
          }
        }
      }
    },
    methods: {
    },
    mounted() {
    }
  }