Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/warpcgd/vue-slider
vue-concise-slider,A simple vue sliding component
https://github.com/warpcgd/vue-slider
slide slider vue vue-concise-slider vue-slider
Last synced: about 1 month ago
JSON representation
vue-concise-slider,A simple vue sliding component
- Host: GitHub
- URL: https://github.com/warpcgd/vue-slider
- Owner: warpcgd
- Created: 2016-08-10T17:47:17.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T20:25:27.000Z (over 1 year ago)
- Last Synced: 2024-04-16T10:30:59.547Z (5 months ago)
- Topics: slide, slider, vue, vue-concise-slider, vue-slider
- Language: Vue
- Homepage: https://warpcgd.github.io/vue-concise-slider/#/
- Size: 6.57 MB
- Stars: 919
- Watchers: 29
- Forks: 191
- Open Issues: 51
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue - vue-slider - slider?style=social) - vue 滑动组件 (UI组件)
- awesome-github-vue - vue-slider - vue 滑动组件 (UI组件)
- awesome-github-vue - vue-slider - vue 滑动组件 (UI组件)
- awesome - vue-slider - vue 滑动组件 (UI组件)
README
中文 | [English](https://github.com/warpcgd/vue-concise-slider/blob/master/README_EN.md)
## vue-concise-slider
[](https://www.npmjs.com/package/vue-concise-slider)
[](https://www.npmjs.com/package/vue-concise-slider)
[](https://www.npmjs.com/package/vue-concise-slider)
* * *
vue-concise-slider,一个简单的滑动组件,配置简单,支持自适应/全屏+按钮+分页,同时兼容移动端和PC端
## 版本
[v3.3.6](https://github.com/warpcgd/vue-concise-slider/issues/29) 支持vue2.0+
[v4.0.0](https://github.com/warpcgd/vue-concise-slider/issues/29) beta版本
## 特点
* 简单配置
* 轻量 (~35kB gzipped)
* 多种滑动样式
### 目前已实现
- [x] 全屏自适应
- [x] 移动端兼容
- [x] 垂直滚动
- [x] 定时自动切换
- [x] 不定宽度滚动
- [x] 无缝循环滚动
- [x] 多级滚动
- [x] 渐变滚动
- [x] 旋转滚动
- [x] page中加入自定义组件
- [x] 使用slot替代page
- [x] 自定义分页
- [x] 居中滑动
- [x] 新的coverflow
- [x] 层级嵌套slider
### 未来将实现
- [ ] 虚拟slider
### 链接
- [文档](https://warpcgd.github.io/vue-concise-slider/docs.html)
- [demo](https://warpcgd.github.io/vue-concise-slider/demos/)
### 安装
```html
npm install vue-concise-slider --save
```
### 如何使用
```html
{{item.html}}
loading...
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)
}
}
}
```
## 浏览器支持
现代浏览器及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
### 反馈
wechat: warpcgd