warpcgd / Vue Concise Slider
vue-concise-slider,A simple vue sliding component
Stars: ✭ 831
Projects that are alternatives of or similar to Vue Concise Slider
React Slidy
🍃 React Slidy - Minimalistic and smooth touch slider and carousel component for React
Stars: ✭ 69 (-91.7%)
Mutual labels: slider, slide
Svelte Carousel
A super lightweight, super simple Carousel for Svelte 3
Stars: ✭ 144 (-82.67%)
Mutual labels: slider, slide
Slendr
A responsive & lightweight (2KB gzipped) slider for modern browsers. [UNMAINTAINED]
Stars: ✭ 39 (-95.31%)
Mutual labels: slider, slide
Jcslider
🏂 A responsive slider jQuery plugin with CSS animations
Stars: ✭ 52 (-93.74%)
Mutual labels: slider, slide
Vue Slide Bar
🎢 A Simple Vue Slider Bar Component.
Stars: ✭ 129 (-84.48%)
Mutual labels: slider, slide
Sizeslidebutton
A fun Swift UIControl for picking a size
Stars: ✭ 46 (-94.46%)
Mutual labels: slider, slide
cachu-slider
🌈 🔆 Create animated full screen and content-fit sliders efficiently.
Stars: ✭ 30 (-96.39%)
Mutual labels: slide, slider
Vue Infinite Slide Bar
∞ Infinite slide bar component (no dependency and light weight 1.48 KB)
Stars: ✭ 190 (-77.14%)
Mutual labels: slider, slide
React Whirligig
A react carousel/slider like component for sequentially displaying slides or sets of slides
Stars: ✭ 20 (-97.59%)
Mutual labels: slider, slide
Vue Swipe Mobile
😃 A siwpe (touch slider) component for Vue2
Stars: ✭ 97 (-88.33%)
Mutual labels: slider, slide
Vue Awesome Swiper
🏆 Swiper component for @vuejs
Stars: ✭ 12,072 (+1352.71%)
Mutual labels: slider, slide
React Zmage
一个基于 React 的可缩放图片控件 | A scalable image wrapper power by react
Stars: ✭ 713 (-14.2%)
Mutual labels: slider, slide
Hooper
🎠 A customizable accessible carousel slider optimized for Vue
Stars: ✭ 561 (-32.49%)
Mutual labels: slider, slide
Glightbox
Pure Javascript lightbox with mobile support. It can handle images, videos with autoplay, inline content and iframes
Stars: ✭ 702 (-15.52%)
Mutual labels: slide
React Compound Slider
◾️ React Compound Slider | A small React slider with no opinion on markup or styles
Stars: ✭ 553 (-33.45%)
Mutual labels: slider
中文 | English
vue-concise-slider
vue-concise-slider,一个简单的滑动组件,配置简单,支持自适应/全屏+按钮+分页,同时兼容移动端和PC端
版本
v3.3.6 支持vue2.0+
v4.0.0 beta版本
特点
- 简单配置
- 轻量 (~35kB gzipped)
- 多种滑动样式
目前已实现
- [x] 全屏自适应
- [x] 移动端兼容
- [x] 垂直滚动
- [x] 定时自动切换
- [x] 不定宽度滚动
- [x] 无缝循环滚动
- [x] 多级滚动
- [x] 渐变滚动
- [x] 旋转滚动
- [x] page中加入自定义组件
- [x] 使用slot替代page
- [x] 自定义分页
- [x] 居中滑动
- [x] 新的coverflow
- [x] 层级嵌套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
反馈
wechat: warpcgd
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].