支持手机端滑动的滑块组件_简单的滑动组件具有易于配置的自适应支持

支持手机端滑动的滑块组件

简洁的滑块 (vue-concise-slider)

vue-concise-slider,A simple sliding component,has easy configuration,supported self-adaption / fullscreen / button / page,and is compatible with mobile and PC terminal

vue-concise-slider，一个简单的滑动组件，配置简单，支持自适应/全屏/按钮/页面，并且与手机和PC终端兼容

版 (version)

v2.4.7 Supported vue2.0+

v2.4.7支持的vue2.0 +

特征 (Features)

• Simple configuration

  配置简单

• Simple and lightweight (~24kB gzipped)

  简单轻巧(〜24kB压缩)

• Multiple sliding effects

  多种滑动效果

已达成 (Achieved)

• [x] Self-adaption Fullscreen

  [x]自适应全屏

• [x] Compatible with mobile and PC terminal

  [x]兼容手机和PC终端

• [x] Vertical Slides

  [x]垂直滑轨

• [x] Autoplay Slides

  [x]自动播放幻灯片

• [x] Auto Slides Per View / Carousel Mode

  [x]每个视图自动幻灯片/轮播模式

• [x] Loop Mode / Infinite Loop

  [x]循环模式/无限循环

• [x] Loop Mode / multiple slide

  [x]循环模式/多张幻灯片

• [x] Fade Effect

  [x]淡入淡出效果

• [x] CoverFlow Effect

  [x] CoverFlow效果

• [x] Add custom components in page

  [x]在页面中添加自定义组件

待办事项清单 (To Do List)

• [ ] Parallax

  []视差

安装 (Installation)

npm install vue-concise-slider --save

如何使用它 (How to use it)

<template>
<!-- Make a frame wrapped slider -->
<div style="width:70%;margin:20px auto;height:400px">
<!-- Configuring slider components -->
<slider ref="slider" :pages="pages" :sliderinit="sliderinit" @slide='slide' @tap='onTap' @init='onInit'>
<!-- Set 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>

浏览器支持 (Browser Support)

Modern browsers and Internet Explorer 10+.

现代浏览器和Internet Explorer 10+。

翻译自: https://vuejsexamples.com/a-simple-sliding-component-has-easy-configuration-supported-self-adaption/

支持手机端滑动的滑块组件