shhdgit / Vue Easy Slider
Licence: mit
Slider Component of Vue.js.
Stars: ✭ 313
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Easy Slider
Vue Awesome Swiper
🏆 Swiper component for @vuejs
Stars: ✭ 12,072 (+3756.87%)
Mutual labels: slides, swipe, slider, swiper, vue-plugin, vue-directive
React Native Swiper Flatlist
👆 Swiper component implemented with FlatList using Hooks & Typescript + strict automation tests with Detox
Stars: ✭ 217 (-30.67%)
Mutual labels: swipe, slider, swiper
Swiper
Most modern mobile touch slider with hardware accelerated transitions
Stars: ✭ 29,519 (+9330.99%)
Mutual labels: swipe, slider, swiper
React Native Web Swiper
Swiper-Slider for React-Native and React-Native-Web
Stars: ✭ 125 (-60.06%)
Mutual labels: swipe, slider, swiper
Vue Swipe Mobile
😃 A siwpe (touch slider) component for Vue2
Stars: ✭ 97 (-69.01%)
Mutual labels: swipe, slider, swiper
Vuetify Swipeout
👆 A swipe out example built with Vue CLI 3 + Vuetify + Swiper.
Stars: ✭ 117 (-62.62%)
Mutual labels: swipe, slider, swiper
Slider
Touch swipe image slider/slideshow/gallery/carousel/banner mobile responsive bootstrap
Stars: ✭ 2,046 (+553.67%)
Mutual labels: swipe, slider
Qqzonemood
QQZone mood spider and analysis. QQ空间多线程爬虫和数据挖掘。提供线上服务，扫码登陆即可自动爬取和分析数据，还有网易云年度报告风格的数据展示；使用docker-compose打包程序，方便部署；额外提供QQ空间抽奖小程序。
Stars: ✭ 439 (+40.26%)
Mutual labels: slides, slider
Vue Slide Bar
🎢 A Simple Vue Slider Bar Component.
Stars: ✭ 129 (-58.79%)
Mutual labels: slides, slider
Vue Infinite Slide Bar
∞ Infinite slide bar component (no dependency and light weight 1.48 KB)
Stars: ✭ 190 (-39.3%)
Mutual labels: slides, slider
vue-active-swiper
🌴 A Mobile-oriented、No dependencies、Lightweight Swiper component for Vue
Stars: ✭ 33 (-89.46%)
Mutual labels: slider, swiper
vue-img-orientation-changer
A vue plugin that can help you display image in correct orientation.
Stars: ✭ 38 (-87.86%)
Mutual labels: vue-plugin, vue-directive
React Responsive Carousel
React.js Responsive Carousel (with Swipe)
Stars: ✭ 1,962 (+526.84%)
Mutual labels: swipe, slider
pinar
🌲☀️ Customizable, lightweight React Native carousel component with accessibility support.
Stars: ✭ 214 (-31.63%)
Mutual labels: slider, swiper
skeleton-carousel
Carousel component. Horizontal and vertical swipe navigation
Stars: ✭ 31 (-90.1%)
Mutual labels: slider, swipe
slider-manager
simple wrapper to create sliders focused on animations
Stars: ✭ 28 (-91.05%)
Mutual labels: slider, swipe
vue-drag-zone
Drag Zone component for @vuejs
Stars: ✭ 127 (-59.42%)
Mutual labels: vue-plugin, vue-directive
vue-easy-slider
Keep slider simple!
Demo
Install
npm i -S vue-easy-slider
Usage
Plugin install:
import Vue from 'vue'
import EasySlider from 'vue-easy-slider'
Vue.use(EasySlider)
Or work on a Vue instance:
<slider animation="fade">
<slider-item
v-for="(i, index) in list"
:key="index"
:style="i"
@click="hello"
>
<p style="line-height: 280px; font-size: 5rem; text-align: center;">Page{{ index + 1 }}</p>
</slider-item>
</slider>
import { Slider, SliderItem } from 'vue-easy-slider'
new Vue({
el: 'body',
components: {
Slider,
SliderItem,
},
data() {
return {
list: [
{ backgroundColor: '#3f51b5', width: '100%', height: '100%' },
{ backgroundColor: '#eee', width: '100%', height: '100%' },
{ backgroundColor: '#f44336', width: '100%', height: '100%' },
],
}
},
methods: {
hello($event) {
console.log(`hello index: ${$event}`)
},
},
})
Control slider with v-model
<slider animation="fade" v-model="sliderIndex">
...
</slider>
<button @click="moveToIndex(2)">move to page 3</button>
...
data() {
return {
// initial index
sliderIndex: 1,
list: [
{ backgroundColor: '#3f51b5', width: '100%', height: '100%' },
{ backgroundColor: '#eee', width: '100%', height: '100%' },
{ backgroundColor: '#f44336', width: '100%', height: '100%' },
],
}
},
methods: {
moveToIndex(index) {
this.sliderIndex = index
},
},
...
Props
Slider：
| name | type | default | description |
|---|---|---|---|
| width | String | auto | Slider width |
| height | String | 300px | Slider height |
| touch | Boolean | true | Enable touch slide |
| animation | 'normal', 'fade' | 'normal' | Change animation |
| autoplay | Boolean | true | Autoplay |
| stopOnHover | Boolean | false | Stop autoplay when hover |
| interval | Number | 3000 | Delay of autoplay ( autoplay option should be true ) |
| speed | Number | 500 | Speed(ms) of animation |
| indicators | 'center', 'left', 'right', false | 'center' | Show indicators on option position or hide indicators |
| control-btn | Boolean | true | Show control button |
| before-next | Function | () => true | Before next guard, sliding to next item when this function return true |
| before-previous | Function | () => true | Before previous guard |
Events
Slider：
| name | description | $event |
|---|---|---|
| change | Fires when the slide change | number // index of slides |
| next | Fires when the button for the next slide was pressed | { original: number, next: number } |
| previous | Fires when the button for the previous slide was pressed | { original: number, next: number } |
Slots
SliderItem：
| name | description |
|---|---|
| default | Item content |
| loading | Loading placeholder |
usage:
<slider>
<slider-item>
<img src="">
<p></p>
<button></button>
</slider-item>
<div slot="loading">custom loading ...</div>
</slider>
License
MIT
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].