前端使用Swiper插件实现用户头像轮播效果

上图是有赞的一个页面，因最近公司项目中也有类似需求，同时为分享自己实现此效果的代码，故写这篇博客记录一下。

首先使用到两个插件

1、swiper 版本 8.2.6

2、animate.css 版本 4.11

下面直接贴组件的代码

<template>
  <div class="avatar-box">
    <swiper
      :modules="modules"
      :autoplay="isAutoplay"
      :slides-per-view="4"
      :loop="isLoop"
      @slideChange="onSlideChange"
    >
    // swiper-slide 加上类名swiper-no-swiping 禁止滑动
    // 看官方文档是要将noSwiping配置项设置为true，然后在swiper-slide上面添加swiper-no-swiping类名才行实现。
    // 但貌似直接在swiper-slide添加类名即可实现。。。。。。
    <swiper-slide v-for="(item,index) in avatarList" :key="item" :class="[isSwiping?'':'swiper-no-swiping']" class="slide">
        <img :src="item" class="avatar-img"
        :class="['animate__animated',currentIndex===index || currentIndex-1===index ?'animate__zoomOut':'',
        currentIndex+3===index?'animate__zoomIn':'']"/>
    </swiper-slide>
    </swiper>
  </div>
</template>
<script>
import { reactive, toRefs } from 'vue'
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue'
// import Swiper core and required modules
import { Autoplay } from 'swiper'
// Import Swiper styles
import 'swiper/scss'
export default {
  props: {
    isAutoplay: {
      // 是否自动切换
      type: Boolean,
      default: true
    },
    isLoop: {
      // 是否无限循环
      type: Boolean,
      default: true
    },
    isSwiping: {
      // 是否可以滑动,
      type: Boolean,
      default: false
    }
  },
  components: {
    Swiper,
    SwiperSlide
  },
  setup () {
    const state = reactive({
      currentIndex: '',
      avatarList: [
        require('../assets/images/avatar/avatar.png'),
        require('../assets/images/avatar/avatar.png'),
        require('../assets/images/avatar/avatar.png'),
        require('../assets/images/avatar/avatar.png'),
        require('../assets/images/avatar/avatar.png'),
        require('../assets/images/avatar/avatar.png'),
        require('../assets/images/avatar/avatar.png')
      ]
    })

    const onSlideChange = (swiper) => {
      // realIndex当前活动块的索引
      const { realIndex } = swiper
      state.currentIndex = realIndex
    }

    return {
      ...toRefs(state),
      modules: [Autoplay],
      onSlideChange
    }
  }
}
</script>
<style lang="scss" scoped>
.avatar-box {
  width: 170px;
  .slide {
    .avatar-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #ccc;
    }
  }
}
</style>

最终实现的效果如下，差不多吧哈哈哈。