向右向右横向滑动

基于vue+elementui实现
因为使用swiper或slider都不喜欢太复杂，所以手动写了一个
可使用elementui轮播图el-carousel实现水平自动循环或左右滚动
主要是i标签的向左向右：@click=“leftBtn” @click=“rightBtn”

//v-for遍历数组代码，向左向右是用el字符图标，并写事件@click="leftBtn" @click="rightBtn"
 <div class="mod4">
                  <div class="prev">
                    <i
                      class="el-icon-arrow-left"
                      @click="arrowClick('prev')"
                    ></i>
                  </div>
                  <div class="carouselBox">
                    <el-carousel
                      :loop="true"
                      :autoplay="true"
                      arrow="never"
                      class="carousel"
                      ref="cardShow"
                    >
                      <el-carousel-item
                        class="el-car-item"
                        v-for="(item, index) in dataList"
                        :key="index"
                        style="width: calc(20%-20px)"
                      >
                        <div
                          v-for="(imgList, index1) in item"
                          :key="index1"
                          class="divSrc"
                          @click="item1ToPageBtn(imgList.menuId)"
                        >
                          <div class="ImageText1">
                            <svg-icon :icon-class="imgList.icon" />
                            <div class="TextGroup1">
                              <div class="casetit">
                                <span class="word4">{{ imgList.title }}</span>
                                <p />
                              </div>
                              <div class="divhr"><div class="fx"></div></div>
                              <span class="words">{{ imgList.content }}</span>
                            </div>
                          </div>
                        </div>
                      </el-carousel-item>
                    </el-carousel>
                  </div>

                  <div class="next">
                    <i
                      class="el-icon-arrow-right"
                      @click="arrowClick('next')"
                    ></i>
                  </div>
                </div>


data（）{

 this.dataList = [
        {
          icon: "baohan1",
          path: "http://2",
          title: "综合",
          content:
            "交易",
          menuId: 1,
          imgUrl: "./assets/bgImg/1.png"
        },
        {
          icon: "baohan2",
          path: "http://21",
          title: "政",
          content:
            "依",
          menuId: 2,
          imgUrl: "./assets/bgImg/2.png"
        },
        {
          icon: "baohan3",
          path: "http://2",
          title: "电",
          content:
            "电",
          menuId: 3,
          imgUrl: "./assets/bgImg/3.png"
        },
        {
          icon: "baohan4",
          path: "http://2",
          title: "串",
          content:
            "串",
          menuId: 4,
          imgUrl: "./assets/bgImg/4.png"
        },
        {
          icon: "baohan5",
          title: "金",
          content: "",
          content: "",
          menuId: 5,
          imgUrl: "./assets/bgImg/5.png"
        },
        {
          icon: "tab",
          path: "http://2",
          title: "智",
          content: "",
          menuId: 6,
          imgUrl: "./assets/bgImg/6.png"
        }
      ];
}



//核心代码

//向左把第一个菜单移除，然后把移除的添加到最尾部
 leftBtn() {
      let temp = this.listData[0];
      this.listData.splice(temp, 1);
      this.listData.push(temp);
    },
    
 //向右把最后一个菜单移除
    rightBtn() {
      let temp = this.listData[5];
      this.listData.splice(5, 1);
      this.listData.splice(0, 0, temp);
      return;
    },