缩放图左右滑动，大图变化

案例是vue写法

<div>
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          v-for="item in list"
          :key="item.id"
        >
          <img :src="item.banner" />
        </div>
      </div>
    </div>

    <div class="bottom" v-if="list.length > 0">
      <img
        v-show="list.length > 8"
        class="arrow-left"
        @click="perviousBtn()"
        src="../../assets/management_images/arrow3.png"
        alt
      />
      <div class="bottom-wrap">
        <div
          :style="{
            width: 152 * list.length + 'px',
            transition: 'transform 100ms linear',
            transform: 'translateX(' + certificateWidth + 'px)',
          }"
        >
          <span
            class="bottombtn"
            @click="activeHandle(item, index)"
            v-for="(item, index) in list"
            :key="index"
            :class="bottomItem === index ? 'activebottom' : ''"
          >
            {{ item.name.slice(0, 6) }}
          </span>
        </div>
      </div>
      <img
        v-show="list.length > 8"
        class="arrow-right"
        @click="nextBtn(list.length, 8)"
        src="../../assets/management_images/arrow4.png"
        alt
      />
    </div>
</div>



 data() {
    return {
      list: [],
      bottomItem: 0,
      certificateWidth: 0,
    };
},
methods: {
    // 底部导航切换
    activeHandle(item, index) {
      this.bottomItem = index;
    },

    perviousBtn() {
      let xNum = 152;
      this.certificateWidth = this.certificateWidth + xNum;
      if (this.certificateWidth > 0) {
        this.certificateWidth = 0;
      }
    },

    nextBtn(length, lengthNum) {
      let xNum = -152;
      this.certificateWidth = this.certificateWidth + xNum;
      if ( (length - lengthNum) * xNum  >= this.certificateWidth ) {
        this.certificateWidth = (length - lengthNum) * xNum;
        return;
      }
    }
}