vue 3d轮播图封装完整代码

一、效果图如下：

二、实现功能点

（1）、无缝轮播

（2）、进入变大、离开缩小（类3d切换效果）

三、代码如下

<!--轮播图插件模板-->
<template>
  <p class="banner">
      <p class="swiper-wrapper" v-if="bannerData&&bannerData.length" :style="{ 'background-image': 'url(' + bannerImage + ')'}">
        <swiper :options="swiperOption" ref="mySwiper">
          <!-- 幻灯内容 -->
          <swiper-slide :key="index" v-for="(item, index) in bannerData">
            <p class="banner_info" @click="goToDetail(item.skuId)" :style="{ 'background-image': 'url(' + showBackground(item) + ')'}">
              <p class="info_img">
                <img v-if="false"  :src="item.goodsDependImg?(item.goodsDependImg):(item.productImage)" class="banner_img">
              </p>
             <p class="info_content">
               <h1 class="info_format">{{item.goodsNoun}}</h1>
               <p class="info_name">{{item.productName}}</p>
               <h1 class="info_price" v-text=getSymbolValue(item.price)></h1>
             </p>
            </p>
          </swiper-slide>
        </swiper>
        <p class="swiper-pagination" id="pageination"></p>
        <!--<pageination :pageIndex="pageinationIndex" :pageCount="bannerData.length"></pageination>-->
      </p>
  </p>
</template>

<script type="text/ecmascript-6">
  import {swiper, swiperSlide} from 'vue-awesome-swiper'
  require('swiper/dist/css/swiper.css');//注意这里
  import Pageination from "./pageination"
  import { mapActions, mapMutations, mapGetters, mapState}  from "vuex"
  import {getPriceSymbolValue} from '../../util/tool/index'

  export default {
    //props: ['bannerList'],
    data() {
      let _self=this;
      return {
        pageinationIndex:0,
        data: {
          "bannerList":[]
        },
        swiperOption: {
          loop: true,   // 循环
          speed:500,   //切换速度
          mousewheelControl: false,// 禁止鼠标滚轮切换
          lazy: {
            loadPrevNext: true,
          },
          pagination: {
            el: '.swiper-pagination',
          },
          autoplay: {
            delay:2000,
            stopOnLastSlide: false, // 切换到最后一个时不停止
            disableOnInteraction: false, //用户操作swiper之后 不停止autoplay
          },
          watchSlidesProgress:true,
          centeredSlides: true, //设定为true时，活动块会居中，而不是默认状态下的居左。
          spaceBetween:10,
          slidesPerView: 1.7,
          loopedSlides :2,
          observer: true,
          observeParents: true
        }
      }
    },
    methods: {
      goToDetail:function (skuId) {
        window.location.href = '//' + window.location.host + '/' + skuId + '.html';
      },
      getSymbolValue(price) {
        if (price) {
          return getPriceSymbolValue(price)
        }
      },
      showBackground(item){
        return  item.goodsDependImg?item.goodsDependImg:item.productImage
      }
    },
    mounted() {
      // 这边就可以使用swiper这个对象去使用swiper官网中的那些方法
//      this.$nextTick(function() {
//        this.swiper.slideTo(3, 10, false);
//      });
    },
    computed: {
      ...mapGetters([
        'bannerData'
      ]),
      ...mapState({
        bannerData: state => state.bannerData,
        bannerImage: state => state.bannerImage
      }),
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    components: {
      swiper,
      swiperSlide,
      Pageination
    }
  }
</script>

<style lang="scss" type="text/scss">
  @import "../../common/scss/mix";
  .banner{
    width: 100%;
    height: 7.6rem;
    box-sizing: border-box;
    position: relative;
    background-size:100%  auto;
    margin-top: 1.28rem;
    .swiper-wrapper{
      background-size: 100% 100%;
    }
    .swiper-container {
      position: absolute;
      width: 100%;
      top: 2.02rem;
      left: 0;
      right: 0;
      .swiper-wrapper {
        width: 100%;
        height: 4.8rem;
      }
      .swiper-slide {
        position: relative;
        width: 80%;
        height: 4.8rem;
        transition: all 0.5s ease-in-out;
        transform: scaleY(0.92) translateZ(0);
        .banner_info{
          position: absolute;
          top: 0;
          left: 50%;
          margin-left: -2.05rem;
          width: 4rem;
          height: 4.8rem;
          border-radius: 2px;
          background-size: 100% 100%;
          overflow: hidden;
          .info_img{
            position: relative;
            width:100%;
            height: 2.14rem;
            margin-top: 0.59rem;
            margin-bottom: 0.28rem;
            box-sizing: border-box;
            /*background: url(../../../static/defaultPic.png) no-repeat 50%;*/
            /*background-size: 40%;*/
            img {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              display: block;
              max-width:100%;
              height: 100%;
            }
          }
          .info_content{
            padding-left: 0.21rem;
            padding-right: 0.21rem;
            .info_format{
              font-size:14px;
              font-weight: bold;
              text-align: left;
              letter-spacing: 0;
              font-family: Helvetica-Bold;
              color: #ffffff;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              min-height: 0.4rem;
            }
            .info_name{
              font-size: 12px;
              white-space:initial;
              overflow : hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              margin-top: 0.1rem;
              -webkit-line-clamp: 2;
              /*! autoprefixer: off */
              -webkit-box-orient: vertical;
              /* autoprefixer: on */
              font-family:Helvetica,sans-serif;
              letter-spacing: 0;
              min-height: 0.56rem;
              color: #ffffff;
            }
            .info_price{
              font-size:15px;
              font-weight:600;
              color: #ffffff;
              margin-top: 0.1rem;
              letter-spacing: 0;
              font-family:Helvetica,sans-serif;
            }
          }
        }
      }
      .swiper-slide-active{
        transform:translateZ(0) scaleY(1)!important;
      }
    }
    #pageination{
      position: absolute;
      margin-left: -1rem;
      width:2rem;
      left: 50%;
      height: 0.2rem;
      bottom: 0.34rem;
      display: flex;
      span{
        display:inline-block;
        width:8px;
        height:8px;
        margin: 0 auto;
        border-radius: 50%;
      }
      .swiper-pagination-bullet{
        display:inline-block;
        width:8px;
        height:8px;
        margin: 0 auto;
        border-radius: 50%;
        background:#8C8B8D;
        opacity: 1;
      }
      .swiper-pagination-bullet-active{
        width:20px;
        height:6px;
        border-radius: 5px;
        position: relative;
        top: 1px;
        background:#ffffff;
      }
    }
  }
</style>