Vue Js Image Swipe|Slider (left,Right) using Touch

Vue Js Image Swipe|Slider Left And Right using Touch: In Vue.js, you can implement image swiping using touch events. First, you create a container element and an <img> element to display the images. Then, you add event listeners for touchstart and touchend events on the container element. Inside the event handlers, you calculate the distance between the start and end points of the touch event to determine the direction of the swipe. Finally, you update the index of the current image based on the direction of the swipe and update the <img> element to display the new image. By doing this, you can create a responsive image gallery that users can swipe|slider left and right on their touch devices.

How can you implement image swiping in Vue.js using touch events to allow users to swipe left and right to navigate through a series of images in a gallery?

Create a Vue instance with an array of image URLs and a currentIndex data property.
Use a computed property to return the URL of the current image based on the currentIndex.
Add a mounted lifecycle hook to the Vue instance to add event listeners for touchstart and touchend events on the swipeArea container element.
Inside the touchstart event listener, record the starting screenX and screenY positions of the touch event.
Inside the touchend event listener, record the ending screenX and screenY positions of the touch event and calculate the distance and direction of the swipe.
If the swipe distance meets a certain threshold, update the currentIndex property of the Vue instance based on the direction of the swipe using the handleSwipe method.
Inside the handleSwipe method, increment or decrement the currentIndex property based on the direction of the swipe and ensure the index stays within the range of available images.
Bind the src attribute of an img element to the currentImage computed property to display the current image in the gallery.

Overall, this code creates an image gallery that users can swipe left and right using touch events.

Vue Js Image Swipe|Slider left And Right using Touch Example

<div id="app">
        <div ref="swipeArea" class="swipe-area">
            <img v-bind:src="currentImage" alt="Swipe left or right">
        </div>
</div>
    <script>
      new Vue({
            el: '#app',
            data() {
                return {
                    images: [
                        'https://placekitten.com/400/400',
                        'https://placebear.com/400/400',
                        'https://placeimg.com/400/400/nature',
                    ],
                    currentIndex: 0,
                };
            },
            mounted() {
                const swipeArea = this.$refs.swipeArea;
                let touchstartX = 0;
                let touchstartY = 0;
                let touchendX = 0;
                let touchendY = 0;
                const threshold = 50; // minimum distance required to register a swipe

                swipeArea.addEventListener('touchstart', (event) => {
                    touchstartX = event.changedTouches[0].screenX;
                    touchstartY = event.changedTouches[0].screenY;
                }, false);

                swipeArea.addEventListener('touchend', (event) => {
                    touchendX = event.changedTouches[0].screenX;
                    touchendY = event.changedTouches[0].screenY;
                    const deltaX = touchendX - touchstartX;
                    const deltaY = touchendY - touchstartY;
                    if (Math.abs(deltaX) > threshold && Math.abs(deltaY) < threshold) {
                        this.handleSwipe(deltaX > 0 ? 'right' : 'left');
                    }
                }, false);
            },
            computed: {
                currentImage() {
                    return this.images[this.currentIndex];
                },
            },
            methods: {
                handleSwipe(direction) {
                    if (direction === 'right') {
                        this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
                    } else {
                        this.currentIndex = (this.currentIndex + 1) % this.images.length;
                    }
                },
            },

        });
    </script>