滑动 JS：单击边缘到下一项

Question

我正在使用 Swipe JS 创建全屏图像库，并希望添加单击左/右边缘以转到上一张/下一张幻灯片的功能。

我尝试创建绝对定位的

a

标签，但这会破坏滑动功能，因为无法在链接上启动滑动。 为了解决这个问题，我想我可以将事件传递给正确的元素：

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

但这会引发以下错误：

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

有人知道如何传递这个活动吗？或者也许有更好的方法来做到这一点？

Answer 1

我建议使用 Swipe.js 的内置事件处理来获得干净的解决方案：

使用

on()

在 Swiper 实例中定义自定义事件（下一次单击和上一次单击）。 单击导航元素时触发这些事件。 这是代码：

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');
});