在VUE项目中使用VUE-AWESOME-SWIPER,实现轮播图,两边显示图片,中间图片放大效果

先看效果

1.安装

• 安装vue-awesome-swiper指定版本

npm install vue-awesome-swiper@4 --save-dev

• 安装swiper

npm install swiper@5

2. 在vue中引入

import { SwiperSlide, Swiper } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.min.css'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
}

3.swiper组件的使用

<template>
  <div class="app-container">
    <swiper :options="swiperOption" v-if="imgList.length">
      <swiper-slide v-for="item of imgList" :key="item.id">
              <img class="slide-img" :src="item.picUrl"/>
      </swiper-slide>
    </swiper>
 
  </div>
</template>

<script>
  // 引入vue-awesome-swiper
  import 'swiper/dist/css/swiper.css'
  import {swiper, swiperSlide} from 'vue-awesome-swiper'
  export default {
    // 注册组件
    components: {
      swiper,
      swiperSlide
 
    },
    data() {
      return {
        // 图片列表可以写死（也可以从接口中获取）
        imgList: [],
        // 配置属性
        swiperOption: {
          direction: 'horizontal', // 滑动的方向(水平方向)
          loop: true, // 是否循环
          autoplay: {
            delay: 1500 // 自动播放的时长
          },
          slidesPerView: 'auto', // 设置可视区一共显示几张图片,设置auto,设置auto为自适应;
          centeredSlides: true, // 设置为true时,带有active-slide类名的图片会居中
          spaceBetween: 4 //  每张图片之间的间隔
        }
      }
    }
 
  }
</script>
 
<style lang="less" scoped>
.swiper-slide{
  width: 60%;
  height: 300px;
  img{
    width:100%;
    height:100%;
  }
}
// 如果想要两边的图片显示时缩小加上一下css代码
// 默认中间的图片会带有类名 : .swiper-slide-acive;
// 默认中间的图片的上一张图片会带有类 名:  .swiper-slide-prev ;
// 默认中间的图片的下一张会带有类名: .swiper-slide-next ;.
.swiper-slide-next{
  transform: scale(.8);
}
.swiper-slide-prev{
  transform: scale(.8);
}
</style>

---

总结

1. 注意版本和网上方法里版本差异
2. 如果引入不对，去node_modules看下插件包里的路径