pspgbhu / Vue Swipe Mobile
Licence: mit
😃 A siwpe (touch slider) component for Vue2
Stars: ✭ 97
Projects that are alternatives of or similar to Vue Swipe Mobile
Vue Awesome Swiper
🏆 Swiper component for @vuejs
Stars: ✭ 12,072 (+12345.36%)
Mutual labels: swipe, slider, slide, swiper
React Native Swiper Flatlist
👆 Swiper component implemented with FlatList using Hooks & Typescript + strict automation tests with Detox
Stars: ✭ 217 (+123.71%)
Mutual labels: swipe, slider, swiper
Vuetify Swipeout
👆 A swipe out example built with Vue CLI 3 + Vuetify + Swiper.
Stars: ✭ 117 (+20.62%)
Mutual labels: swipe, slider, swiper
Swiper
Most modern mobile touch slider with hardware accelerated transitions
Stars: ✭ 29,519 (+30331.96%)
Mutual labels: swipe, slider, swiper
React Native Web Swiper
Swiper-Slider for React-Native and React-Native-Web
Stars: ✭ 125 (+28.87%)
Mutual labels: swipe, slider, swiper
Vue Easy Slider
Slider Component of Vue.js.
Stars: ✭ 313 (+222.68%)
Mutual labels: swipe, slider, swiper
React Zmage
一个基于 React 的可缩放图片控件 | A scalable image wrapper power by react
Stars: ✭ 713 (+635.05%)
Mutual labels: slider, slide
Swipe
Swipe is the most accurate touch slider. Support both React and Angular.
Stars: ✭ 850 (+776.29%)
Mutual labels: swipe, slide
Hooper
🎠 A customizable accessible carousel slider optimized for Vue
Stars: ✭ 561 (+478.35%)
Mutual labels: slider, slide
Vue Slick Carousel
🚥Vue Slick Carousel with True SSR Written for ⚡Faster Luxstay
Stars: ✭ 447 (+360.82%)
Mutual labels: slider, swiper
Splide
Splide is a lightweight, powerful and flexible slider and carousel, written in pure JavaScript without any dependencies.
Stars: ✭ 786 (+710.31%)
Mutual labels: swipe, slider
React Whirligig
A react carousel/slider like component for sequentially displaying slides or sets of slides
Stars: ✭ 20 (-79.38%)
Mutual labels: slider, slide
Shuffle
🔥 A multi-directional card swiping library inspired by Tinder
Stars: ✭ 535 (+451.55%)
Mutual labels: swipe, swiper
Vue Concise Slider
vue-concise-slider,A simple vue sliding component
Stars: ✭ 831 (+756.7%)
Mutual labels: slider, slide
Sizeslidebutton
A fun Swift UIControl for picking a size
Stars: ✭ 46 (-52.58%)
Mutual labels: slider, slide
Slendr
A responsive & lightweight (2KB gzipped) slider for modern browsers. [UNMAINTAINED]
Stars: ✭ 39 (-59.79%)
Mutual labels: slider, slide
English | 简体中文
c-swipe
A swipe (touch slide) component for Vue2.x in mobile device. Only support touch event now.
Install
npm install c-swipe --save
Usage
register components:
// main.js
// import c-swipe files into main.js
import 'c-swipe/dist/swipe.css';
import { Swipe, SwipeItem } from 'c-swipe';
// global register components
Vue.component('swipe', Swipe);
Vue.component('swipe-item', SwipeItem);
Use in .vue
files.
<swipe
v-model="index"
style="text-align: center; line-height: 80px; height: 100px; background: #42b983;"
>
<swipe-item style="height: 100px; line-height: 100px">item1</swipe-item>
<swipe-item style="height: 100px; line-height: 100px">item2</swipe-item>
<swipe-item style="height: 100px; line-height: 100px">item3</swipe-item>
</swipe>
new Vue({
data: function () {
return {
index: 0, // two way
};
},
});
Or, you want import it by html tag
<link href="https://unpkg.com/c-swipe/dist/swipe.css" rel="stylesheet"></head>
<script type="text/javascript" src="https://unpkg.com/c-swipe/dist/swipe.js"></script>
var vueSwipe = swipe.Swipe;
var vueSwipeItem = swipe.SwipeItem;
new Vue({
el: 'body',
// register components
components: {
'swipe': vueSwipe,
'swipe-item': vueSwipeItem
}
// ...
// ...
});
Options
Option | Type | Defalut | Description |
---|---|---|---|
v-model | Number | 0 | The value binding index of swipe-item |
pagination | Boolean | true | If need default pagination. |
loop | Boolean | true | loop move |
autoplayTime | Number | 0 | ms. Interval time of change card. The card will not auto change when this value is equal to 0 |
speed | Number | 300 | ms, the spend time of change card. |
minMoveDistance | String | '20%' | Such as '20%', '80px'. The minimum distance that trigger to change card |
Methods
- swipe.reset()
The c-swipe internally recalculates the width of the Swipe and calculates the scroll distance based on the new width. This solves the problem that the c-swipe scroll distance is not correct after the container is resized.
Example:
<swipe ref="swipe">
<swipe-item>item1</swipe-item>
<swipe-item>item2</swipe-item>
<swipe-item>item3</swipe-item>
</swipe>
<script>
export default {
// ...
// ...
mounted() {
// Avoid losing context
this.handleResize = this.handleResize.bind(this);
window.addEventListener('resize', this.handleResize);
},
destroyed() {
window.removeEventListener('resize', this.handleResize);
},
methods: {
handleResize() {
this.$refs.swipe.reset();
},
},
// ...
// ...
}
</script>
Preview
Scan the QR code below to preview
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].