'How to move image with touch event?

I have a dating project. I have some logic like tinder.(like\skip\dislike) On the project we'r using vue2, laravel and vue-bootstrap. So, my problem is, when its mobile version, i have to use tinder logic(swipe for like and dislike). When i swipe left or right everything works good, but i need some UI like when swiping the img have to moove to that side.

                <b-carousel
                id="carousel-1"
                ref="myCarousel"
                v-model="slide"
                :interval="0"
                no-hover-pause
                no-wrap
                img-width="500"
                img-height="500"
                style="text-shadow: 1px 1px 2px #333;"
              :no-touch="true"
            >
                <b-carousel-slide
                  v-if="typeof item.length=='undefined'">
                    <template #img>
                        <img
                           @touchstart="touchStartMethod"
                           @touchend="touchEndMethod"
                            width="500"
                            height="500"
                            :title="item.username"
                            :src="item.src"
                            :alt="item.username"
                            class="rounded img-fluid"
                        >
                    </template>
                </b-carousel-slide>
           </b-carousel>

Its my template. Everything i need is the UI. I cant add new libraries, thats why i hope on your help. Have a nice day.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source