Swipe JS: tap on the edge to view the next item

Question

Swipe JS: tap on the edge to view the next item

Currently utilizing Swipe JS to generate a full-screen image gallery and aiming to incorporate the functionality of clicking on the left or right edge to navigate between the previous and next slides.

An attempt was made to create absolutely positioned a tags, however, this caused issues with the swipe feature as swiping couldn't be initiated on the links. To resolve this issue, it was considered to pass the event to the correct element:

document.getElementById('next').addEventListener('touchstart', function(e){
    document.getElementById('swipe-wrap').dispatchEvent(e);
}, false);

This implementation resulted in the following error:

Uncaught InvalidStateError: Failed to execute 'dispatchEvent' on 'EventTarget': The event is already being dispatched.

Seeking advice on how to effectively pass along the event or suggestions for an alternative approach.

javascript swipe.js

Answer 1

Answer №1

For a tidy solution, I suggest utilizing Swipe.js's built-in event handling feature:

To implement this, create custom events (next-click and prev-click) within your Swiper instance using the on() method. Then, trigger these events when clicking on your navigation elements. Below is an example of the code to achieve this:

var swiper = new Swiper('.swiper-container', {
    on: {
        'next-click': function () {
            swiper.slideNext();
        },
        'prev-click': function () {
            swiper.slidePrev();
        }
    }
});

document.getElementById('prev').addEventListener('click', function () {
    swiper.trigger('prev-click');
});

document.getElementById('next').addEventListener('click', function () {
    swiper.trigger('next-click');
});

Answer 2

For a tidy solution, I suggest utilizing Swipe.js's built-in event handling feature:

To implement this, create custom events (next-click and prev-click) within your Swiper instance using the on() method. Then, trigger these events when clicking on your navigation elements. Below is an example of the code to achieve this:

var swiper = new Swiper('.swiper-container', {
    on: {
        'next-click': function () {
            swiper.slideNext();
        },
        'prev-click': function () {
            swiper.slidePrev();
        }
    }
});

document.getElementById('prev').addEventListener('click', function () {
    swiper.trigger('prev-click');
});

document.getElementById('next').addEventListener('click', function () {
    swiper.trigger('next-click');
});

Swipe JS: tap on the edge to view the next item

Answer №1

Similar questions

Invoking Javascript Functions using their names

Error: JSON at position 1 is throwing off the syntax in EXPRESS due to an unexpected token "

Convert the date and time of "2018-03-31T05:37:57.000Z" to a

Is there a specific jest matcher available for comparing Array<Objects>?

Button for AngularJS delete request

The type does not contain a property named `sort`

How can you resize a circle in Three.js without resizing its outline?

What is the most efficient way to retrieve key pair values of separate elements in an array with just one API request?

Setting up the data for the AjaxAppender Request Log4Javascript

Accessing data stored in XML or JSON files from a local server

Failing to include a valid string in the path will result in an

Transform a delimited string and an array of objects into a new format

Retrieve information using AJAX via POST method

Omit node_modules from typescript compilation using gulp-typescript

Tracking tool for monitoring progress of HTTP POST requests

Tips for obtaining the combined outcome of multiple arrays (3 to 5 arrays) in JavaScript

The setState method fails to properly update the state

Is there a way to gradually reveal JSON data without continuously re-parsing and displaying it on a webpage?

Having trouble parsing the body parameter in Express for a POST request

Looking to customize scrolling behavior when navigating back in Next.js?