Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
vue-concise-slider
Advanced tools
vue-slider,A simple sliding component,has easy configuration,support self-adaption / fullscreen / button / page,and is compatible with mobile and PC terminal
中文 | English
vue-concise-slider,一个简单的滑动组件,配置简单,支持自适应/全屏+按钮+分页,同时兼容移动端和PC端
v2.1.1 ~ v2.1.2 组件发布至NPM v2.1 支持vue2.0+
npm install vue-concise-slider --save
<template>
<slider :pages="pages" :sliderinit="sliderinit">
<!-- slot -->
</slider>
</template>
<script>
import slider from 'vue-concise-slider'// 引入slider组件
export default {
el: '#app',
data () {
return {
//图片列表[arr]
pages:[
{
title: '',
style:{
background:'url(src/img/testimg-1.jpg)'
}
},
{
title: '',
style:{
background:'url(src/img/testimg-2.jpg)'
}
},
{
title: 'slide3',
style:{
background:'#4bbfc3',
},
}
],
//滑动配置[obj]
sliderinit: {
currentPage: 0,//当前页码
thresholdDistance: 500,//滑动判定距离
thresholdTime: 100,//滑动判定时间
autoplay:1000,//自动滚动[ms]
loop:true,//循环滚动
direction:'vertical',//方向设置,垂直滚动
infinite:1,//无限滚动前后遍历数
slidesToScroll:1,//每次滑动项数
}
}
},
components: {
slider
}
}
</script>
Option | Type | Default | Description |
---|---|---|---|
title | string | - | 当前设置为每页的标题,未来将直接输出html |
style | obj | - | 直接作用在每个item上的style样式,可以输出背景图,背景色,每项宽度可自定义,自动切换为不定宽滚动 |
Option | Type | Default | Description |
---|---|---|---|
direction | string | 'horizontal' | 方向设置,默认为水平滚动('horizontal'),可设置为垂直滚动('vertical') |
currentPage | number | - | 当前为第几页 |
thresholdDistance | number | - | 滑动距离阈值 |
thresholdTime | number | - | 滑动时间阈值 |
autoplay | number[ms] | - | 自动播放:时间[ms] |
loop | boolean | false | 循环滚动 |
infinite | number | 1 | loop无缝滚动时,可以设置前后遍历数 |
slidesToScroll | number | 1 | 每次滑动切换的页数 |
Method | Parameters | Description | Example |
---|---|---|---|
slideTo | number | 滑动到(number)页 | childComponents.$emit('slideTo', num) |
slideNext | - | 滑动到下一页 | childComponents.$emit('slideNext') |
slideTo | - | 滑动到上一页 | childComponents.$emit('slidePre') |
Method | Parameters | Description | Example |
---|---|---|---|
slide | number | 当前滑动到第(number)页 | childComponents.$on('slide', function(pagenum){console.log(pagenum)}) |
欢迎来留下你的意见:https://github.com/warpcgd/vue-concise-slider/issues/1
可以在这里提交,会尽快处理:https://github.com/warpcgd/vue-concise-slider/issues/2
FAQs
vue-slider,A simple sliding component,has easy configuration,support self-adaption / fullscreen / button / page,and is compatible with mobile and PC terminal
The npm package vue-concise-slider receives a total of 1,394 weekly downloads. As such, vue-concise-slider popularity was classified as popular.
We found that vue-concise-slider demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.