vue横向无缝滚动以及点击按钮切换

插件官网：https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/01-basic.html

1. 引入vue-seamless-scroll

npm

npm install vue-seamless-scroll --save

yarn

yarn add vue-seamless-scroll

2. 在main.js文件里面引入使用

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

3. 页面配置

<vue-seamless-scroll :data="data" :class-option="optionSwitch" class="seamless-warp3">
   <span v-if="data.length > 4" slot="left-switch" class="left-arrow"></span>
   <span v-if="data.length > 4" slot="right-switch" class="right-arrow"></span>
   <ul class="item" :style="`width:${455 * (data.length + 1)}px`">
      <li v-for="(item, index) in data" :key="index">
           //需要轮播的组件或者数据
          <parameter :data="item" :title="item[0].bak1"></parameter>
       </li>
    </ul>
</vue-seamless-scroll>

computed配置

 computed: {
    optionSwitch2: {
      get() {
        return {
          navigation: true,//左右方向的滚动是否显示控制器按钮
          switchSingleStep: 450,//点击切换移动的 step 值(px)
          direction: 3,//方向: 0 往下 1 往上 2 向左 3 向右。
          switchOffset: 10，//左右切换按钮距离左右边界的边距(px)。
        }
      }
    }
  },

4. css

.seamless-warp3 {
  pointer-events: auto;
  overflow: hidden;
  // height: 140px;
  // width: 453px * 4;
  width: 1891px;
  margin: 0 auto;

  .left-arrow,
  .right-arrow {
    position: relative;
    display: inline-block;
    width: 26px;
    height: 113px;
    border-radius: 50%;
    background-color: #00a0e9;
    cursor: pointer;

    // &:hover {
    //   background-color: #0f39fa;
    // }
    &::before {
      position: absolute;
      content: '';
      width: 16px;
      height: 16px;
      top: 12px;
      left: 15px;
      border: 2px solid #fff;
    }
  }

//左右切换按钮的样式
  .left-arrow {
    background: url('../images/right-arrow.png') no-repeat;
  }

  .right-arrow {
    background: url('../images/left-arrow.png') no-repeat;
  }

  .left-arrow::before {
    display: none;
  }

  .right-arrow::before {
    display: none;
  }

  ul,
  li {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  ul.item {
    display: flex;
    align-items: flex-end;

    li {
      height: auto;
    }
  }
}