discover.js framework+；javascript箭头

我使用的框架将一个网站变成了一个整版的水平网站

我正在尝试编写一些javascript来响应.navigate left和.navigate right箭头的单击

我发现leaver.js类名.navigate-right.enabled适用于右侧，navigate.left适用于左侧。 但是，它只响应桌面上箭头的点击，不适用于移动设备上的点击或滑动，也不适用于桌面上的按键、触摸板滑动（这是由reveal.js框架支持的）

下面是一个简单的示例（鼠标滚动或移动滑动以查看其不起作用）：

$（文档）.ready（函数（）{
//右箭头
$（“.right.enabled”）。单击（函数（）{
$（“#侧列文本框”）.animate（{top::-=300px}，1020）；
})  
//左箭头
$（“.向左导航”）。单击（函数（）{
$（“#侧列文本框”）.animate（{top:+=300px}，1020）；
})      
})

我已经尝试了很多不同的解决方案，但都没有成功，所以任何帮助都是非常好的

---

-谢谢

当我学习addEventListener函数时，我取得了一些进步 我必须设置一个不同的事件名称，即使函数是相同的，这使得它有点混乱。 请参见此处的演示：

第0页
第1页
第2页
第3页
document.addEventListener（'data-event-textbox'，function（））{
$（“#侧列文本框”）.animate（{top::-=84%}，1020）；
});
document.addEventListener（'data-event-textbox1'，function（）{
$（“#侧列文本框”）.animate（{top::-=84%}，1020）；
});
document.addEventListener（'data-event-textbox2'，function（）{
$（“#侧列文本框”）.animate（{top::-=84%}，1020）；
})

这使鼠标滚动和移动刷与我的工作。动画！然而，我现在遇到的问题是，当向左滑动或单击时，函数应该为.animate+=84%，而不是-=84%

有没有想过如何在向左滑动/单击时触发幻灯片，以便以相反的方式设置动画

<script type="text/javascript">
    $(document).ready(function(){
            // RIGHT ARROW 
            $(".navigate-right.enabled").click(function(){
                $('#side-column-textbox').animate({top: "-=300px"}, 1020);
                })  

            // LEFT ARROW 
            $(".navigate-left").click(function(){
                $('#side-column-textbox').animate({top: "+=300px"}, 1020);
                })      
    })
</script>

        <section >
            <h2>PAGE 0</h2>
        </section >


        <section data-state="data-event-textbox">
            <h2>PAGE 1</h2>
        </section>


        <section data-state="data-event-textbox1">
            <h2>PAGE 2</h2 >
        </section>


        <section data-state="data-event-textbox2">
            <h2>PAGE 3</h2>
        </section>


<script>

    document.addEventListener('data-event-textbox', function(){
        $('#side-column-textbox').animate({top: "-=84%"}, 1020);

    });

    document.addEventListener('data-event-textbox1', function(){
        $('#side-column-textbox').animate({top: "-=84%"}, 1020);

    });

    document.addEventListener('data-event-textbox2', function(){
        $('#side-column-textbox').animate({top: "-=84%"}, 1020);

    })
</script>