wvue-slider

介绍

轮播图

安装教程

npm install wvue-slider -D

使用说明

//main.js
import slider from 'wvue-slider'
Vue.use(slider)

//page.vue
<template>
    <Slider v-slot="slotProps" :list="list" :initPage="initPage" :changeWidth="changeWidth">
      <div class="item_carousel">
        <div v-for="(item, index) in slotProps.item" :key="index" class="item_ul">{{item.name}}</div>
      </div>
    </Slider>
</template>

<script>
export default {
  data() {
    return {
      list: [ //二维数组
        [{ name: 1 }, { name: 2 }, { name: 3 }],
        [{ name: 1 }, { name: 2 }, { name: 3 }],
        [{ name: 1 }, { name: 2 }, { name: 4 }],
      ],
      initPage: false, //是否初始索引值
      changeWidth: 0, //宽度 = 100% - changeWidth
    };
  },
  methods: {
    changeSlider(i){
      console.log('翻页触发', i)
    }
  },
};
</script>