vue-awesome-swiper使用

安装

npm install swiper vue-awesome-swiper --save
// "vue-awesome-swiper": "^4.1.1",
// "swiper": "^6.5.7",

全局配置

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'

// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

局部配置

import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'

// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'

// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  }
}

使用

<!-- 首页 -->
<template>
<div class="page_content">
    <!-- 轮播图 -->
    <div class="banner">
        <div class="full-page-slide-wrapper">
            <swiper :options="swiperOption" class="swiper" ref="mySwiper">
                <swiper-slide v-for="(item,index) in carouselArr"  class="swiper-slide" :key="index">
                <img class="swiperImg" :src="item.src" />
                </swiper-slide>
            </swiper>
        </div>
    </div>
</div>
</template>
<script>
import {
    Swiper,
    SwiperSlide,
    directive
  } from 'vue-awesome-swiper'
// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'

//引入图片   xxx需换成本地图片路径
import banner1 from 'xxx';
import banner2 from 'xxx';
import banner3 from 'xxx';

export default {
  components: {
      Swiper,
      SwiperSlide
    },
    data() {
      return {
        banner1,
        banner2,
        banner3,
        swiperOption: {
          direction: 'horizontal',
          loop: true,
          loopedSlides:3, //显示个数
          autoplay:true,
          slidesPerView: 'auto',
          centeredSlides: true, //默认居中
          spaceBetween: 10, //距离
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
            bulletActiveClass: 'slide_dot_active',
            bulletClass: 'slide_dot'
          }
        },
        carouselArr:[ {
            'src': banner1
          },
          {
            'src': banner2
          },
          {
            'src': banner3
          },
        ],
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper
      }
    },
    directives: {
      swiper: directive
    },
}
</script>
<style lang="less" scoped>
.page_content {
    background: #F7F8F8;
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .page_content .banner {
    height: 207px;
  }

  .page_content .menus {
    flex: auto;
    padding: 10px;
    box-sizing: border-box;
  }

  .swiper-container {
    height: 100%;
  }

  .swiperImg {
    height: 100%;
  }

  .full-page-slide-wrapper {
    width: 100%;
    height: 190px;
    box-sizing: content-box;
    padding-top: 10px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;

    .swiper-container {
      width: 100%;
      height: 100%;

      .swiper-wrapper {
        display: flex;
        align-items: center;
      }

      .swiper-slide {
        width: calc(100% - 50px);
        border-radius: 5px;
      }

      .swiper-slide-prev {
        height: 90% !important;
        margin-top: 2%;
      }

      .swiper-slide-next {
        height: 90% !important;
        margin-top: 2%;
      }
    }

    img {
      object-fit: fill;
      height: 100%;
      width: 100%;
      border-radius: 5px;
    }

    .slide_dot {
      display: inline-block;
      margin: 5px;
      width: 3px;
      height: 3px;
      background-color: #f2f2f2;
      border-radius: 50%;
      opacity: 0.5;
    }

    .swiper-pagination {
      bottom: 0;
    }

    .slide_dot_active {
      display: inline-block;
      width: 7px;
      height: 3px;
      border-radius: 5px;
      background: white;
      opacity: 1;
    }
  }
</style>