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端
v3.1.1 支持vue2.0+
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+
git checkout -b my-new-feature
git commit -am 'Add some feature'
git push origin my-new-feature
欢迎来留下你的意见:https://github.com/warpcgd/vue-concise-slider/issues/1
可以在这里提交,会尽快处理:https://github.com/warpcgd/vue-concise-slider/issues/2
Webchat: warpcgd
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.