VUE实现图片左右滚动

1、HTML

<el-row :gutter="20">
    <el-col :xs="24" :sm="24" :md="24">
        <div class="jxIndexFrame">
            <span class="jxIndexTitle">荣誉资质</span>
            <div class="certificateModel">
                <el-col :xs="2" :sm="2" :md="1" class="text-right certificateArrow" style="margin-left: 5px">
                    <i class="el-icon-d-arrow-left" @click="prevCenterHonorCertificate"></i>
                </el-col>
                <el-col :xs="20" :sm="20" :md="22">
                    <div class="certificateFrom">
                        <div v-bind:style="{ width: 278 * certificateList.length + 'px' ,transition: 'transform 1s linear', transform:'translateX(' + certificateWidth + 'px)'}">
                            <div v-for="(item, index) in certificateList" :key="index">
                                <div class="certificateImg">
                                    <img :src="item.certificatesImg" alt="">
                                    <span>{{item.certificatesName}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :xs="2" :sm="2" :md="1" class="text-center certificateArrow" style="margin-left: -10px">
                    <i class="el-icon-d-arrow-right" @click="nextCenterHonorCertificate(certificateList.length, 6)"></i>
                </el-col>
            </div>
        </div>
    </el-col>
</el-row>

2、JS

data () {
    return {
        certificateList: [],
        certificateWidth: 0
    }
},
methods: {
// 获取证书列表
getHonorBookList () {
  this.$http.get(`/help/jxhonor/getAllHonorList`, {
    params: {}
  }).then(({ data: res }) => {
    this.certificateList = res.data
  }).catch(() => {
  })
},
/**
* 证书点击上一个
*/
 prevCenterHonorCertificate () {
   this.certificateWidth = this.certificateWidth + 278
   if (this.certificateWidth > 0) {
     this.certificateWidth = 0
   }
 },
 /**
  * 证书点击下一个
  */
 nextCenterHonorCertificate (length, lengthNum) {
   var xNumber = -278
   this.certificateWidth = this.certificateWidth + xNumber
   if (this.certificateWidth <= ((length - lengthNum) * xNumber)) {
     this.certificateWidth = ((length - lengthNum) * xNumber)
   }
 }
}

3、CSS

@media (min-width: 320px) and (max-width: 767px) {
    // 荣誉资质
  .certificateModel{
    padding-top: 30px;
  }
  .certificateModel .el-col-xs-2{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .certificateModel .el-col-xs-20{
    padding-left: 6px !important;
  }
  .certificateFrom{
    overflow: hidden;
    width: 270px;
  }
  .certificateImg{
    overflow: hidden;
    width: 278px;
    height: 216px;
    float: left;
  }
  .certificateImg img{
    display: block;
    width: 260px;
    height: 180px;
    margin: 0 9px;
  }
  .certificateImg span{
    display: block;
    text-align: center;
    padding: 15px 0;
    font-size: 16px;
  }
  .certificateArrow i{
    font-size: 24px;
    color: #73d19e;
    font-weight: bold;
    padding: 70px 0;
    cursor: pointer;
  }
}


@media (min-width: 768px) and (max-width: 1920px) {
    // 荣誉资质
  .certificateModel{
    margin: 90px 0 50px 0;
    overflow: hidden;
  }
  .certificateFrom{
    overflow: hidden;
  }
  .certificateImg{
    overflow: hidden;
    width: 278px;
    height: 220px;
    float: left;
  }
  .certificateImg img{
    display: block;
    width: 260px;
    height: 180px;
    margin: 0 9px;
  }
  .certificateImg span{
    font-size: 16px;
    text-align: center;
    display: block;
    padding-top: 15px;
    line-height: 28px;
  }
  .certificateArrow i{
    font-size: 36px;
    color: #73d19e;
    font-weight: bold;
    padding: 70px 0;
    cursor: pointer;
  }
}