vue2使用Swiper实现图片轮播-任意图片匀速轮播等等

问题：实现走马灯似的效果--一次性展示4张图片

解决：使用的是"swiper": "4.5.1", 版本是4.5.1 代码如下

<!-- 图片平滑轮播 -->
<template>
  <!--  -->
  <div class="smooth-carousel" :style="isButton && list.length > number ? 'padding:0 40px 0 40px;' : ''">
    <div :class="'swiper-container' + ' ' + className">
      <!-- 图片轮播样式 自己定制自己需要的需求 -->
      <div class="swiper-wrapper">
 // swiper-slide这个类名要带着 很多类名是组件要求 不能没有

        <div class="swiper-slide swiper-item" v-for="(i, index) in list" :key="index">
          <img class="img" :style="{ height: imgHeight }" :src="i[imgField][0].address" alt="" @click="handleImgClick(i)">

          <div class="title text_exceed_1row_ellipsis" v-if="isTitle">{{ i[titleField] }}</div>
        </div>
        <el-image ref="elImageRef" v-show="false" class="img" :src="imgUrl" :preview-src-list="imgList">
        </el-image>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination" v-if="isPage"></div>

    </div>
    <!-- 左右箭头 这是我自己定义的 没有采用默认的箭头 默认箭头是图片 改不了 -->
    <div class="swiper-button-prev1" v-if="isButton && list.length > number">
      <i class="el-icon-arrow-left"></i>
    </div>
    <div class="swiper-button-next1" v-if="isButton && list.length > number">
      <i class="el-icon-arrow-right"></i>
    </div>
  </div>
</template>

<script>
/* 引入swiper插件 */
import Swiper from "swiper";
import 'swiper/dist/css/swiper.css';
import 'swiper/dist/js/swiper';

export default {
name:'SmoothCarousel',
  props: {
    className: {
      required: true,
      type: String,
      default: 'swiper-container'
    },
    list: {
      type: Array,
      default: []
    },
    imgField: {
      type: String,
      default: 'atlas'
    },
    isTitle: {
      type: Boolean,
      default: true
    },
    titleField: {
      type: String,
      default: 'atlasTitle'
    },
    loop: {
      type: Boolean,
      default: true
    },
    number: {
      type: Number,
      default: 4
    },
    spaceBetween: {
      type: Number,
      default: 10,
    },
    speed: {
      type: Number,
      default: 5000
    },
    direction: {
      type: String,
      default: "horizontal"
    },
    pagination: {
      type: Boolean,
      default: true
    },
    autoplay: {
      default: () => ({
        delay: 0, // 每循环一圈，间隔时间，无缝轮询，则为0
        disableOnInteraction: false, // 启用用户操作（如拖动、点击）后轮播仍然继续。
        stopOnLastSlide: false, // 让轮播循环播放
      })
    },
    isPage: {
      type: Boolean,
      default: false
    },
    isButton: {
      type: Boolean,
      default: false
    },
    imgHeight: {
      type: String,
      default: "300px"
    }
  },
  data() {
    return {
      imgUrl: '',
      imgList: []
    }
  },
  mounted() {
    this.bannerPoint()
  },
  methods: {
    bannerPoint() {
      new Swiper(`.${this.className}`, {
        observer: true,
        observeSlideChildren: true,
        observeParents: true,  //这三个可以去文档看下介绍，主要就是异步情况会重新加载swiper。
        loop: this.loop,
        on: { // 处理loop为true后 图片点击失效
          click: (event) => {
            //event.target 为dom元素
            let src = event.target.src
            const data = this.list.find(i => i[this.imgField][0].address === src)
            this.handleImgClick(data)
          }
        },
        speed: this.speed,// 每个轮播图过渡的时间
        spaceBetween: this.spaceBetween, // 轮播图间隔
        autoplay: this.autoplay,
        updateOnImagesReady: true,
        pdateOnWindowResize: false,  //分辨率改变时，防止样式错乱加上！
        slidesPerView: this.number,  //设置slider容器能够同时显示的slides数量
        direction: this.direction,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          paginationClickable: true,
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next1', // 右按钮
          prevEl: '.swiper-button-prev1', // 左按钮
        },
      }
      )
    },
    handleImgClick(i) {
      this.imgList = i[this.imgField].map(i => i.address)
      this.$refs.elImageRef.showViewer = true
    }
  }
};
</script>
<style lang="scss" scoped>
.smooth-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;


  .swiper-container {
    width: 100%;
    overflow: hidden;
    background-color: #fff !important;


    .swiper-wrapper {

      transition-timing-function: linear !important; //想好具体位置放到哪，得能替换！

    }

    .swiper-item {
      width: 100%;
      height: 100%;

      .img {
        width: 100%;
        height: 300px;
        cursor: pointer;
      }

      .title {
        margin: 10px 0 20px;
        text-align: center;
        font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
        font-weight: 700;
        font-style: normal;
        text-align: center;
        color: #333333;
        font-size: 18px;
      }
    }

  }

  .swiper-button-prev1,
  .swiper-button-next1 {

    width: 30px;
    position: absolute;
    top: 0;
    bottom: 24px;
    z-index: 11111;
    display: flex;
    align-items: center;
    font-size: 30px;
    color: $organizationBgc;
    cursor: pointer;
  }

  .swiper-button-prev1 {
    left: 0px;
  }

  .swiper-button-next1 {
    right: 0;
  }
}
</style>

// 上面代码 在vue2上 复制就可以直接使用
// 基础使用 我命名的组件名是 SmoothCarousel  v-if和类名是必须传的 类名传的字符串都可以 唯一就行swiper类型不唯一 多个地方使用 会共用一份数据 v-if是异步数据问题 不加的话 可能动画没效果
   <smooth-carousel :list="honorCarouselList" :isTitle="false" className="home_honors"
        v-if="honorCarouselList.length" />
// 扩展 不想自动播放想要左右箭头 传参数 autoplay='false' isButton='true'