Swipe any elements to left and right in vue.js
for vue3 use @shopid/vue3-swipe-box
npm i @shopid/vue2-swipe-box
you just need one box inside SwipeBox , and children inside that box
<SwipeBox>
<div style="width:200px;height:200px;border:1px solid black">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</SwipeBox>
- support both right to left and left to right (rtl,ltr) css layouts
- support both mouse and touch
Live demo on stackblitz
onChange method will call when user swipe
you can change speed of magnet swiping with speed prop
you can swipe to next previous and index by calling these methods : (swipetoNext , swipetoPrevious , goTo)
soruce on github https://github.com/shopid-dev/vue2-swipe-box
<template>
<div id="app">
<SwipeBox ref="myswipe" @onChange="mySwipeChanged" speed="150">
<div style="width: 200px; height: 200px; border: 1px solid black">
<div v-for="image in images" :key="image.id">
<img :src="image.url" />
</div>
</div>
</SwipeBox>
<button @click="next">next</button><br />
<button @click="previous">previous</button><br />
<button @click="goto2">goto index #2</button><br />
</div>
</template>
<script>
import SwipeBox from '@shopid/vue2-swipe-box';
export default {
name: 'App',
components: {
SwipeBox,
},
data: () => {
return {
images: [
{ id: '1', url: 'https://picsum.photos/200' },
{ id: '2', url: 'https://picsum.photos/200?2' },
{ id: '3', url: 'https://picsum.photos/200?3' },
{ id: '4', url: 'https://picsum.photos/200?4' },
{ id: '5', url: 'https://picsum.photos/200?5' },
],
};
},
methods: {
mySwipeChanged: function (index) {
console.log('index' + index);
},
next: function (x) {
this.$refs.myswipe.swipetoNext();
},
previous: function (x) {
this.$refs.myswipe.swipetoPrevious();
},
goto2: function () {
this.$refs.myswipe.goTo(2);
},
},
};
</script>