异行slide vue

效果

<template>
  <div class="hp-teacher-intro" v-if="item">
    <div class="title">
      <img class="icon" src="../../../../../../editorImg/teacher.png" alt="" />
      <h2>{{ moduleProp.title || '机构介绍' }}</h2>
    </div>
    <div class="card">
      <swiper class="swiper" :options="swiperOption" ref="mySwiper" @slideChange="slideChange">
        <!-- 添加的图片 -->
        <swiper-slide v-for="(v, index) in list" :key="index">
          <img class="img" :src="v.image" />
          <h4>{{ v.title }}</h4>
          <!-- <h6>
            {{ v.intro }}
          </h6> -->
        </swiper-slide>
      </swiper>
      <div v-for="(value, idx) in list" :key="idx" class="intro">
        <h6 v-show="idx === current">
          {{ value.intro }}
        </h6>
      </div>
      <!-- <div class="swiper">
        <a-carousel autoplay class="swiper-list">
          <img src="../../../../../../editorImg/peopel1.png" alt="" />
          <img src="../../../../../../editorImg/peopel2.png" alt="" />
          <img src="../../../../../../editorImg/peopel3.png" alt="" />
        </a-carousel>
      </div> -->
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { getSitesEditorModuleStateKey } from '@/utils/util'
import 'swiper/css/swiper.css'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
export default {
  props: {
    moduleProp: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      swiperOption: {
        // 可见图片张数
        slidesPerView: 3,
        // 默认选中中间一张
        centeredSlides: true,
        centeredSlidesBounds: true,
        // 无限循环
        loop: true,
        // effect: 'coverflow',
        // 小圆点（我此处没使用，列出供参考）
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        coverflow: {
          rotate: 0, // slide做3d旋转时Y轴的旋转角度。默认50。
          stretch: 200, // 每个slide之间的拉伸值，越大slide靠得越紧。 默认0。
          depth: 150, // slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
          // modifier: 1, // depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
          slideShadows: false // 开启slide阴影。默认 true。
        },
        // 自动轮播
        autoplay: {
          stopOnLastSlide: true,
          delay: 5000
        },
        // 上下按钮点击轮播效果
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      list: [
        {
          image: require('../../../../../../editorImg/peopel1.png'),
          title: '11',
          intro: '11111111111111111112'
        },
        {
          image: require('../../../../../../editorImg/peopel2.png'),
          title: '222222',
          intro: '222222222222223'
        },
        {
          image: require('../../../../../../editorImg/peopel3.png'),
          title: '某某某：联合创始人某某某：联合创始人',
          intro:
            '某某某：联合创始人某某某：联合创始人某某某：联合创始人某某某：联合创始人某某某：联合创始人某某某：联合创始人某某某：联合创始人某某某：联合创始人某某某：联合创始人某某某：联合创始人某某某：联合创始人某某某：联合创始人'
        }
      ],
      current: 0
    }
  },
  computed: {
    ...mapState('sitesEditor', {
      item: function(state) {
        return state[getSitesEditorModuleStateKey('item', this.moduleProp)]
      }
    }),
    swiper() {
      return this.$refs.mySwiper.$swiper
    }
  },
  methods: {
    ...mapActions('sitesEditor', ['getModuleData']),
    async initData() {
      await this.getModuleData(this.moduleProp)
    },
    // 点击官网进行动态修改
    toOrgIntroOfficial() {
      const routerId = this.$route.params.id
      const routeUrl = this.$router.resolve({
        path: `/orgIntroOfficialEditor/edit/${routerId}`
      })
      window.open(routeUrl.href, '_blank')
    },
    slideChange() {
      this.current = this.swiper.realIndex
    }
  },
  mounted() {
    // this.initData()
  },
  components: {
    Swiper,
    SwiperSlide
  }
}
</script>

<style lang="stylus" scoped>
.hp-teacher-intro
  // height 144px
  width 100%
  padding 15px
 .title
    display flex
    align-items center
    .icon
      width 20px
      color #ff7e2f
      margin -8px 5px 0 5px
    h2
      // display inline-block
      font-weight bold
  .card
    padding 19px
    border-radius 10px
    box-shadow 0 0 8px #cccccc
    width 100%
    .swiper
      width 174px
      border-color white
      .swiper-slide
        // display flex
        position relative
        width 60px
        align-items center
        justify-content center
        .img
          // width 60px
          height 120px
          width 100%
        h4
          display none
        h6
          display none
      .swiper-slide-active
        z-index 999
        .img
          width 80px
          height 125px
        h4
          display block
          width 174px
          margin-left -60px
          margin-top 20px
          text-align center
    .intro
      text-align center
</style>