canvas-slider-vue

使用说明

• 本插件是基于canvas和面向对象封装的轮播图
• 具体使用方法
  1. 安装依赖 npm i canvas-slider-vue
  2. 页面创建一个显示轮播图元素， 必须设置宽度，高度可不设置，如果高度设置会以设置的高度为准，如果没有设置高度，会以图片比例设置高度
  3. 引入slider.js, 然后进行初始化。完整代码如下

          <template>
              <div class="slider" ref="mySlider">
              </div>
          </template>
  
          <script>
              import Slider from 'canvas-slider-vue';
              export default {
              mounted() {
                  new Slider(this.$refs.mySlider, {
                      isAutoPlay: false, // 是否自动轮播 
                      imgList: [require('@/assets/img/a.jpg'), require('@/assets/img/b.jpg'),require('@/assets/img/c.jpg'),require('@/assets/img/d.jpg')], // 图片列表
                      dotColor: "red", // 点的颜色
                      dotWidth: 20, // 点的宽度
                      dotGap: 15, // 点与点之间的间距
                      dotLineWidth: 2, // 点的外层边框宽度
                      dotLineColor: "red", // 点边框的颜色
                      arrowLineWidth: 6, // 箭头的粗细
                      arrowWidth: 40, // 箭头的宽度
                      arrowHeight: 60, // 箭头的高度
                      arrowLineColor: "#fff", // 箭头的颜色
                      arrowGap: 10, // 箭头距离页面两侧的间距
                      arrowPadding: 10, // 箭头内部的间距
                      arrowBgColor: "rgba(0,0,0,0.5)", // 箭头的外层元素背景色
                      })
                  }
              }
          </script>
  
          <style scoped>
              .slider {
                  width: 800px;
              }
          </style>