移动端&PC端 vueconciseslider 轮播组件

vue-concise-slider,一个简单的滑动组件,配置简单,支持自适应/全屏+按钮+分页,同时兼容移动端和PC端

 

 

特点

• 简单配置
• 轻量 (~35kB gzipped)
• 多种滑动样式

目前已实现

•  全屏自适应
•  移动端兼容
•  垂直滚动
•  定时自动切换
•  不定宽度滚动
•  无缝循环滚动
•  多级滚动
•  渐变滚动
•  旋转滚动
•  page中加入自定义组件
•  使用slot替代page
•  自定义分页
•  居中滑动
•  新的coverflow
•  层级嵌套slider

未来将实现

•  虚拟slider

安装

npm install vue-concise-slider --save

如何使用

<template>
<!-- 制作一个框架包裹slider -->
 <div style="70%;margin:20px auto;height:400px">
      <!-- 配置slider组件 -->
      <slider :pages="pages" :sliderinit="sliderinit" @slide='slide' @tap='onTap' @init='onInit'>
          <!-- 设置loading,可自定义 -->
          <div slot="loading">loading...</div>
      </slider>
 </div>
</template>
<script>
import slider from 'vue-concise-slider'// import slider components
export default {
   el: '#app',
   data () {
      return {
        //Image list
        pages:[
          {
          html: '<div class="slider1">slider1</div>',
          style: {
            'background': '#1bbc9b'
            }
          },
          {
            html: '<div class="slider2">slider2</div>',
            style: {
              'background': '#4bbfc3'
            }
          },
          {
            html: '<div class="slider3">slider3</div>',
            style: {
              'background': '#7baabe'
            }
          }
        ],
        //Sliding configuration [obj]
        sliderinit: {
          currentPage: 0,
          thresholdDistance: 500,
          thresholdTime: 100,
          autoplay:1000,
          loop:true,
          direction:'vertical',
          infinite:1,
          slidesToScroll:1,
          timingFunction: 'ease',
          duration: 300
        }
      }
    },
    components: {
        slider
    },
    methods: {
      // Listener event
      slide (data) {
        console.log(data)
      },
      onTap (data) {
        console.log(data)
      },
      onInit (data) {
        console.log(data)
      }
    }
}
</script>

相关配置

1.  pagination: true, // 底部小圆点是否隐藏（true显示，false隐藏）

2.  currentPage: 0, // 当前页码

3.  thresholdDistance:500, // 滑动判定距离

4.  thresholdTime:100, // 滑动判定时间

5.  autoplay:2000, // 自动滚动[ms]

6.  loop:true, // 是否循环滚动

7.  direction:'vertical', // 滚动方向

8.  infinite:1, // 无限滚动前后遍历数

9.  slidesToScroll:1, // 滚动行数

Demo地址 https://warpcgd.github.io/vue-concise-slider/demos/

文档地址 https://warpcgd.github.io/vue-concise-slider/docs.html