vue-concise-slider,A simple vue sliding component
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist V3.2.0 #1 Sep 19, 2018
docs V3.2.0 #1 Sep 19, 2018
src V3.2.0 #1 Sep 19, 2018
.babelrc 更新 webpack3 Aug 22, 2018
.eslintignore V3 Sep 8, 2018
.eslintrc.js webpack 3 Aug 22, 2018
.gitattributes 🎪 Added .gitattributes Aug 10, 2016
.gitignore 提交webpack修改 Feb 26, 2018
README.md V3.2.0 #1 Sep 19, 2018
README_EN.md V3.2.0 #1 Sep 19, 2018
index.html v3.1.01 Sep 18, 2018
package-lock.json V3 Sep 8, 2018
package.json v3.1.1 Update document Sep 18, 2018
vue-slider-github.jpg update Aug 15, 2016
webpack.config.js v2.5.4 Sep 7, 2018

README.md

中文 | English

vue-concise-slider

npm npm npm


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

版本

v3.2.0 支持vue2.0+

特点

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

目前已实现

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

未来将实现

  • 层级嵌套slider
  • 虚拟slider

链接

安装

  npm install vue-concise-slider --save

如何使用

<template>
<!-- 制作一个框架包裹slider -->
 <div style="width:70%;margin:20px auto;height:400px">
      <!-- 配置slider组件 -->
      <slider ref="slider" :options="options" @slide='slide' @tap='onTap' @init='onInit'>
          <!-- 直接使用slideritem slot -->
           <slideritem v-for="(item,index) in someList" :key="index" :style="item.style">{{item.html}}</slideritem>
          <!-- 设置loading,可自定义 -->
          <div slot="loading">loading...</div>
      </slider>
 </div>
</template>
<script>
import { slider, slideritem } from 'vue-concise-slider'// import slider components
export default {
   el: '#app',
   data () {
      return {
        //Image list
        someList:[],
        //Sliding configuration [obj]
        options: {
          currentPage: 0,
          thresholdDistance:500,
          thresholdTime:100,
          autoplay:1000,
          loop:true,
          direction:'vertical',
          loopedSlides:1,
          slidesToScroll:1,
          timingFunction: 'ease',
          speed: 300
        }
      }
    },
    components: {
      slider,
      slideritem
    },
    mounted () {
      let that = this
      setTimeout(function () {
        that.someList = [
          {
            html: 'slide1',
            style: {
              'background': '#1bbc9b'
            }
          },
          {
            html: 'slide2',
            style: {
              'background': '#4bbfc3'
            }
          },
          {
            html: 'slide3',
            style: {
              'background': '#7baabe'
            }
          }
        ]
      }, 2000)
    },
    methods: {
      // Listener event
      slide (data) {
        console.log(data)
      },
      onTap (data) {
        console.log(data)
      },
      onInit (data) {
        console.log(data)
      }
    }
}
</script>

浏览器支持

现代浏览器及ie10+

贡献

  • Fork it!
  • Create your feature branch: git checkout -b my-new-feature
  • Commit your changes: git commit -am 'Add some feature'
  • Push to the branch: git push origin my-new-feature
  • Submit a pull request

有更好的想法?

欢迎来留下你的意见:https://github.com/warpcgd/vue-concise-slider/issues/1

BUG?oh no!

可以在这里提交,会尽快处理:https://github.com/warpcgd/vue-concise-slider/issues/2

联系作者

Webchat: warpcgd