🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A simple, lightweight, responsive, touch-friendly slider/carousel component for Vue.js 2+.

Carousel _Slider

Documentation

中文 | English

vue-concise-slider

npm npm npm


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

版本

v3.3.6 支持vue2.0+

v4.0.0 beta版本

特点

  • 简单配置
  • 轻量 (~35kB 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

反馈


You May Also Like