vue3-swipe-box

Swipe any elements to left and right in vue.js
for vue2 use @shopid/vue2-swipe-box

installation

npm i @shopid/vue3-swipe-box

How to use

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

onChange method will call when user swipe

speed

you can change speed of magnet swiping with speed prop

swipetoNext , swipetoPrevious , goTo

you can swipe to next previous and index by calling these methods : (swipetoNext , swipetoPrevious , goTo)

soruce on github https://github.com/shopid-dev/vue3-swipe-box

Full example

<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/vue3-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>