Swiper 图片轮播

效果：两张图并列，并依次轮播，并实现点击某张图片弹出大图 

参考代码以及效果：其中110实例Swiper演示 - Swiper中文网收录了Swiper的40多个在线示例（swiper demos），Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端，以及PC端网站能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。https://www.swiper.com.cn/demo/index.html

 代码如下

<div class="swiper-container gallery-image">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(item,index) in GridImages"
            :key="'gallery-top' + index"
          >
            <el-image
              style="width: 218px; height: 139px"
              :src=item
            ></el-image>
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>
 <el-image-viewer
      :zIndex="9999"
      ref="viewer"
      :initial-index="imageIndex"
      v-if="showViewer"
      :on-close="closeViewer"
      :url-list="GridImages"
    />

 css样式控制

.swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      width: 220px;
      height: 140px;
      background: rgba(255, 255, 255, 0);

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

js页面初始化时加载代码

 let _this = this
    let swiper = new Swiper('.gallery-image', {
      slidesPerView: 2,
      spaceBetween: 0,
      autoplay: true,//同时是否轮播  也可以自定义轮播时间
      pagination: {
        el: '.swiper-pagination',
        clickable: false
      },
      on: {
        click: function () {
          _this.imgClick(this.clickedIndex)
        }
      }
    })

控制点击某张图片弹出大图方法

 imgClick(index) {
      debugger
      this.showViewer = true
      this.imageIndex = index//图片索引
    },
    closeViewer() {
      this.showViewer = false
    }