1、install

npm install swiper vue-awesome-swiper --save

2、页面具体代码 

<template>
  <div class="container-box">
    <div class="slogan-box">
      <img src="../assets/images/cpjs_bg.png" class="picture">
      <div class="swiper-box">
        <div v-swiper:mySwiper="swiperOption" ref="mySwiper">
          <!-- <div v-swiper:mySwiper="swiperOption" ref="mySwiper" @slideChangeTransitionEnd="slideChangeTransitionEnd"> -->
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="../assets/images/cpjs_card_1.png">
            </div>
            <div class="swiper-slide">
              <img src="../assets/images/cpjs_card_2.png">
            </div>
            <div class="swiper-slide">
              <img src="../assets/images/cpjs_card_3.png">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content-box-other" v-if='activeSlide===0'>
      <img src="../assets/images/cpjs_1_1.png">
      <img src="../assets/images/cpjs_1_2.png">
      <img src="../assets/images/cpjs_1_3.png">
    </div>
    <div class="content-box-other" v-else-if='activeSlide===1'>
      <img src="../assets/images/cpjs_2_1.png" v-if='swichtwo===0'>
      <img src="../assets/images/cpjs_2_2.png" v-else>
      <div class="tab-box">
        <div class="tab-left-btn" :class="{ 'active-tab': swichtwo===0 }" @click="swichTwo(0)"></div>
        <div class="tab-right-btn" @click="swichTwo(1)"></div>
      </div>
    </div>
    <div class="content-box-other" v-else-if='activeSlide===2'>
      <img src="../assets/images/cpjs_3_1.png" :class="{ 'active-tab': swichtwo===0 }" v-if='swichthree===0'>
      <img src="../assets/images/cpjs_3_2.png" v-else>
      <div class="tab-box">
        <div class="tab-left-btn" @click="swichThree(0)"></div>
        <div class="tab-right-btn" @click="swichThree(1)"></div>
      </div>
    </div>
    <div class="model" v-if="showDetail" @click="close">
      <img src="../assets/images/cpjs_more.png" class="model-box">
    </div>
    <div class="detail-bottom" @click="openDetail">了解服务详情</div>
  </div>
</template>
<script>
import { swiper, swiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
let vm = null
export default {
  name: 'product',
  components: {
    swiper,
    swiperSlide
  },
  directives: {
    swiper: directive
  },
  data () {
    return {
      activeSlide: 0,
      swichtwo: 0,
      swichthree: 0,
      banners: ['../assets/images/cpjs_card_1.png', '../assets/images/cpjs_card_2.png', '../assets/images/cpjs_card_3.png'],
      swiperOption: {
        slidesPerView: 'auto',
        centeredSlides: true,
        spaceBetween: 5,
        on: {
          slideChange () {
            vm.activeSlide = this.activeIndex
          }
        }
      },
      showDetail: false
    }
  },
  created () {
    vm = this
  },
  methods: {
    openDetail () {
      this.showDetail = true
    },
    close () {
      this.showDetail = false
    },
    swichTwo (swichtwo) {
      console.log('swichtwo', swichtwo)
      this.swichtwo = swichtwo
    },
    swichThree (swichthree) {
      this.swichthree = swichthree
    }
  },
  mounted () {
  }
}
</script>
<style scoped>
@import "../../node_modules/swiper/css/swiper.css";
.container-box {
  width: 10rem /* 750/75 */;
  background: rgba(249, 250, 251, 1);
}
.slogan-box {
  position: relative;
}
.swiper-box {
  width: 100%;
  height: 4.426667rem /* 332/75 */;
  position: absolute;
  top: 0.533333rem /* 40/75 */;
}
.swiper-slide {
  width: 7.2rem /* 540/75 */;
  height: 4.426667rem /* 332/75 */;
}
.swiper-slide img {
  width: 7.2rem /* 540/75 */;
  height: 4.426667rem /* 332/75 */;
}
.content-box-other {
  width: 8.933333rem /* 670/75 */;
  margin: 0 auto;
  position: relative;
}
.content-box-other img {
  width: 100%;
}
.tab-box {
  position: absolute;
  width: 100%;
  height: 1.333333rem /* 100/75 */;
  top: 0;
  display: flex;
}
.active-tab {
  width: 5.626667rem /* 422/75 */;
}
.tab-left-btn {
  width: 3.306667rem /* 248/75 */;
  height: 100%;
}
.tab-right-btn {
  flex: 1;
  height: 100%;
}
.detail-bottom {
  padding: 0.666667rem /* 50/75 */ 0 0.8rem;
  text-align: center;
  font-size: 0.346667rem /* 26/75 */;
  font-weight: 300;
  color: rgba(78, 87, 115, 1);
  text-decoration: underline;
}

.model {
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0, 0, 0, 0.7);
  top: 0;
  z-index: 1;
}
.model-box {
  width: 8.773333rem /* 658/75 */;
  position: fixed;
  top: 1.52rem /* 114/75 */;
  left: 50%;
  margin-left: -4.386667rem /* 329/75 */;
}
</style>

3、页面效果