<div class="leftImg">
            <el-carousel :initial-index="currentIndex" style="margin-top: 20px;" ref="carousel" :autoplay="false"
              indicator-position="none">
              <el-carousel-item v-for="(item, index) in images" :key="index">
                <img :src="item">
              </el-carousel-item>
            </el-carousel>
            <div class="thumbnails" ref="thumbnails">
              <div class="thumbnails_con" v-for="(thumbnail, index) in images" :key="index"
                @click="changeImage(index)">
                <img :src="thumbnail" alt=""  :class="{ active: activeThumb === index }">
              </div>
            </div>
          </div>

//data
images: [
       
],
// 点击缩略图图
changeImage(index) {
      this.activeThumb = index
      this.$refs.carousel.setActiveItem(index)
      this.onScroll()
    },
    onScroll() {
      const container = this.$refs.thumbnails;
      const thumbnailWidth = 100
      const targetOffset = this.activeThumb * thumbnailWidth;
      container.scrollLeft = targetOffset - (container.offsetWidth / 2) + (thumbnailWidth / 2);
    }

//CSS
.thumbnails {
        margin: 10px 0;
        white-space: nowrap;
        overflow-x: auto;
        transition: scroll-left 0.5s ease;
        &::-webkit-scrollbar {
          display: none;
        }
        &_con {
          display: inline-block;
          margin-right: 10px;
          transition: all .5s;
          cursor: pointer;
          img {
            width: 105px;
            height: 63px;
            border: 4px solid #ccc;
            border-radius: 5px;
          }
          &:last-child{
            margin-right: 0;
          }
        }

        .active {
          border-color: rgb(102, 102, 102);
        }
      }