vue-awesome-swiper的使用方法_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/css/swiper.min.css";

 components: {
    Swiper,
    SwiperSlide,
  },

备注： import "swiper/css/swiper.min.css"; 这段引入是根据自己的路径去引入

在node_modules搜索swiper

3、在组件中使用

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

<script>
import { SwiperSlide, Swiper } from "vue-awesome-swiper";
import "swiper/css/swiper.min.css";
import img1 from "./img/img0.png";
import img2 from "./img/img1.png";
import img3 from "./img/img2.png";
import img4 from "./img/img3.png";
import img5 from "./img/img4.png";
import img6 from "./img/img5.png";
import img7 from "./img/img1.png";
import img8 from "./img/img2.png";
import img9 from "./img/img3.png";
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      // 图片列表可以写死（也可以从接口中获取）
      imgList: [img1,img2,img3,img4,img5,img6,img7,img8,img9,img1,img2,img3,img4,img5,img6,img7,img8,img9],
      // 配置属性
      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: 54%;
  height: 50%;
  img {
    width: 80%;
    height: 60%;
  }
}
// 如果想要两边的图片显示时缩小加上一下css代码
// 默认中间的图片会带有类名 : .swiper-slide-acive;
// 默认中间的图片的上一张图片会带有类 名:  .swiper-slide-prev ;
// 默认中间的图片的下一张会带有类名: .swiper-slide-next ;.
.swiper-slide-next {
  transform: scale(0.8);
  margin-left: -51px;
}
.swiper-slide-active {
  margin-left: -49px;
}
.swiper-slide-prev {
  transform: scale(0.8);
  margin-left: 47px;
}
</style>

4、轮播的时候我的效果是：中间放大两边缩小 =》向左轮播的