vue 插件vue-awesome-swiper实现 三张图片，左右两边显示一半的效果的示例

图一

图二

在图一的基础上增加自定义布局以及内容

 

一、安装插件 vue-awesome-swiper

安装详情请参考：vue+swiper,【vue-awesome-swiper插件】实现页面“试题”内容左右滑动的切换；获取插件的activeIndex下标值 / realIndex；点击跳转到对应的index页面_禾小毅的博客-CSDN博客_vue左右切换插件

二、图一完整代码

<template>
  <div class="thumb-example">
    <swiper class="swiper gallery-top" :options="swiperOptionTop" ref="swiperTop">
      <swiper-slide v-for="(item, iIndex) in 5" :key="iIndex">
        <img src="@/assets/home/ban1.png" alt="">
      </swiper-slide>
      <div class="swiper-button-next" slot="button-next"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  name: 'swiper-example-thumbs-gallery',
  title: 'Thumbs gallery with Two-way control',
  components: {
    Swiper,
    SwiperSlide
  },
  data () {
    return {
      swiperOptionTop: {
        slidesPerView: 1.31, // 设置slider容器能够同时显示的slides数量,可以是小数,设置为2时,如图所示，设置为3则会出现三张完整的active slide，如API的例子,即设置为偶数时会自动使两边的缩进，类似遮盖一半的效果
        spaceBetween: 0,
        centeredSlides: true, // 设定为true时，active slide会居中，而不是默认状态下的居左
        slideToClickedSlide: true, // true:点击slide会过渡到这个slide,默认false
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        loop: true,
        loopedSlides: 5, // looped slides should be the same
        autoplay: true,
        // effect: 'coverflow', // 类型卡片
        coverflowEffect: {
          slideShadows: false, // 页面阴影效果
          rotate: 0, // 旋转的角度
          stretch: 1000, // 拉伸 图片间左右的间距和密集度，越大靠得越近
          depth: 300, // 深度 切换图片间上下的间距和密集度，值越大z轴距离越远，看起来越小。
          modifier: 0.8 // 修正值 该值越大前面的效果越明显
        },
        // 左右两边的点击事件
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  },
  mounted () {}
}
</script>

<!-- //样式，自行更改即可 -->
<style lang="scss" scoped>
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

.swiper-button-prev {
  left: 11%;
  color: #333;
  // background: url(/images/left_arrow.png) no-repeat center/200%;
}

.swiper-button-next {
  right: 11%;
  color: #333;
  // background: url(/images/right_arrow.png) no-repeat center/200%;
}
</style>

三、图二完整代码

<template>
  <div class="thumb-example">
    <swiper class="swiper gallery-top" :options="swiperOptionTop" ref="swiperTop">
      <swiper-slide ref="imgHeight" v-for="(item, iIndex) in 5" :key="iIndex">
        <!-- 里层 -->
        <div class="video_box">
          <div class="video_item" v-for="(item,cIndex) in imgArr" :key="cIndex" v-if="videoActive === cIndex">
            <img :src="item.img" alt="">
            <span>{{ cIndex }}描述。。。。。。</span>
          </div>
          <div class="video_nav">
            <img v-for="(item,cIndex) in imgArr" :key="cIndex" :src="item.img" @click="VideoChange(cIndex)"
              :class="[videoActive === cIndex?'video_nav_active':'']" alt="">
          </div>
        </div>
      </swiper-slide>
      <div class="swiper-button-next" slot="button-next"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data () {
    return {
      swiperOptionTop: {
        slidesPerView: 1.31, // 设置slider容器能够同时显示的slides数量,可以是小数,设置为2时,如图所示，设置为3则会出现三张完整的active slide，如API的例子,即设置为偶数时会自动使两边的缩进，类似遮盖一半的效果
        spaceBetween: 30,
        centeredSlides: true, // 设定为true时，active slide会居中，而不是默认状态下的居左
        slideToClickedSlide: true, // true:点击slide会过渡到这个slide,默认false
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        loop: true,
        loopedSlides: 5, // looped slides should be the same
        autoplay: true,
        // effect: 'coverflow', // 类型卡片
        coverflowEffect: {
          slideShadows: false, // 页面阴影效果
          rotate: 0, // 旋转的角度
          stretch: 1000, // 拉伸 图片间左右的间距和密集度，越大靠得越近
          depth: 300, // 深度 切换图片间上下的间距和密集度，值越大z轴距离越远，看起来越小。
          modifier: 0.8 // 修正值 该值越大前面的效果越明显
        },
        // 左右两边的点击事件
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      imgArr: [
        { img: require('@/assets/home/ban1.png') },
        { img: require('@/assets/home/ban1.png') },
        { img: require('@/assets/home/ban1.png') }
      ],
      videoActive: 0
    }
  },
  mounted () {
    this.imgLoad()
  },
  methods: {
    imgLoad () {
      this.$nextTick(() => {
        this.Height = this.$refs.imgHeight['0'].height + 'px'
      })
    },
    VideoChange (index) {
      this.videoActive = index
    }
  }
}
</script>

<style lang="scss" scoped>
// 里层样式
.video_box{
  display: flex;
  justify-content: space-between;
  .video_item{
    width: 85%;
    position: relative;
    overflow: hidden;
    img{
      width: 100%;
      height: 100%;
    }
    span{
      position: absolute;
      bottom: 0;
      left: 0;
      background: rgba(0,0,0,.5);
      width: 100%;
      color: #fff;
      padding: 10px 30px;
      text-align: left;
    }
  }
  .video_nav{
    width: 200px;
    height: 138px;
    img {
      width: 100%;
      height: 100%;
      margin-bottom: 20px;
      opacity: .5;
    }
    .video_nav_active{
      opacity: 1;
    }
  }
}
// 外层样式
.swiper-slide-next,.swiper-slide-prev {
  img{
    opacity: .6;
  }
}
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

.swiper-button-prev {
  left: 10.5%;
  color: #333;
  // background: url(/images/left_arrow.png) no-repeat center/200%;
}

.swiper-button-next {
  right: 10.5%;
  color: #333;
  // background: url(/images/right_arrow.png) no-repeat center/200%;
}
</style>

       希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~