vue滚动轮播的组件使用

效果如图 点击右边 左边可以 过渡 平移

listData为数组对象 自行调整

import scroll from "vue-seamless-scroll"
<div class="video-scroll" @click="butChange">
        <scroll :class-option="optionSwitch2" class="seamless-warp3">
        <span slot="left-switch" class="left-arrow"></span>
        <span slot="right-switch" class="right-arrow"></span>
        <ul class="item">
            <li v-for="item in listData" :key="item.id" :data-item="item | jsonStr">
              <div class="img-box" :data-item="item | jsonStr">
                <div :data-item="item | jsonStr"> <img :data-item="item | jsonStr" :src="item.url" alt="" srcset="" width="100%" height="150"></div>

                <div class="text" :data-item="item | jsonStr"> {{item.address}} </div>

              </div>
             
            </li>
        </ul>
      </scroll>
      </div>
      computed: {
      optionSwitch2() {
        return {
          autoPlay: false,
          switchSingleStep: 140,
          switchDelay: 200,
          navigation: true,
          direction: 2,
          limitMoveNum: 2
        }
      }
  }