Javascript 将分页控件添加到整页触摸开关/滑块-Hammer.js

下面是一个功能齐全的全页触摸滑块，我使用

您可以

拖动

，

滑动

或

平移

在页面之间导航

滑块按预期工作，但我现在正试图通过添加两个按钮创建回退导航，以便在单击时也可以进行左右分页

---

问题: 如何在单击时调用锤子向左或向右滑动？（Javascript或jQuery）

当前尝试

$('#Left').on('click', function() {
  HammerCarousel(document.querySelector('.Swiper'), 'Left');
});

---

完整代码

函数滑动（）{
var reqAnimationFrame=（函数（）{
返回窗口[Hammer.前缀（窗口，“requestAnimationFrame”）]| |函数（回调）{
设置超时（回调，1000/60）；
}
})();
功能dirProp（方向、hProp、vProp）{
返回（方向和锤击方向水平）？hProp:vProp
}
功能锤头转盘（容器、方向）{
this.container=容器；
这个方向=方向；
this.panes=Array.prototype.slice.call（this.container.children，0）；
this.containerSize=this.container[dirProp（方向，'offsetWidth'，'offsetHeight'）；
此.currentIndex=0；
this.hammer=新的hammer.Manager（this.container）；
this.hammer.add（新的hammer.Pan（{方向：this.direction，阈值：10}））；
this.hammer.on（“panstart panmove panend pancancel”，hammer.bindFn（this.onPan，this））；
this.show（this.currentIndex）；
}
HammerCarousel.prototype={
显示：函数（显示索引、百分比、动画）{
showIndex=Math.max（0，Math.min（showIndex，this.panes.length-1））；
百分比=百分比| | 0；
var className=this.container.className；
如果（动画）{
if（className.indexOf（'animate'）=-1）{
this.container.className+='animate'；
}
}否则{
if（className.indexOf（'animate'）！=-1）{
this.container.className=className.replace（'animate'，''）.trim（）；
}
}
var paneIndex、pos、translate；
对于（paneIndex=0；paneIndex20&&ev.type=='panend'）{
此.currentIndex+=（百分比<0）？1:-1；
}
百分比=0；
动画=真；
}
this.show（this.currentIndex，百分比，动画）；
}
};
var outer=新的Hammer转盘（document.querySelector（'.Swiper'），Hammer.DIRECTION_水平）；
};
$（刷卡）
html，
身体，
页
斯威普先生{
位置：相对位置；
身高：100%；
}
斯威普先生{
背景:#666；
溢出：隐藏；
}
.Swiper.animate>.Page{
过渡：全部3秒；
-webkit转换：all.3s；
}
.第页{
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：100%；
填充：0 10px；
字体：42px Arial；
颜色：#fff；
垫面：10%；
文本对齐：居中；
}
.页码：第n个子项（奇数）{
背景：#b00；
}
.第页：第n个子项（偶数）{
背景：#58c；
}
#左,，
#对{
位置：绝对位置；
排名：0；
高度：50px；
宽度：50px；
背景：#fff；
文本对齐：居中；
字体：16px/3em Arial；
光标：指针；
}
#左{
左：0；
}
#对{
右：0；
}

第1页
向左拖动
第2页刷我一下
第3页按住PAN
第4页
轻弹返回
左边
对
我已经为此精心设计了一个jQuery解决方案，它应该满足您所寻找的后备方案

但是有些事情要考虑。在您的示例中，也没有考虑页面大小的改变。我这样做也不是为了保持一致并解决眼前的问题，但您会注意到我正在获取
$（'.Page'）.width（）
作为此解决方案中的变量。如果您考虑重新调整大小，我建议重新分配此值。此外，刷卡/点击的组合也会使其失效。我假设，由于您指出这将是一个回退，用户将收到两种体验中的一种。如果没有，我们还需要一种方法来更新刷卡事件的
tracker

您将注意到
var tracker={'R'：0}
。虽然命名可能不是最好的，
'R'
将说明用户以加减1的方式执行了多少次正确的“滑动”（导航单击）

<div id="Left" direction="L">Left</div>
<div id="Right" direction="R">Right</div> 

左
赖特


$（函数（）{
变量宽度=$（'.Page'）.width（）；
变量页=$（'.Page'）.length；
变量跟踪器={R'：0}
$（'#右，#左'）。单击（函数（）{
$（this.attr（'direction'）='R'？
（（tracker.R<（第1页）？tracker.R+=1：页））：
（tracker.R>0）？（tracker.R-=1）：0；
$（'.Swiper'）.animate（{'scrollLeft'：$（'.Page'）.width（）*tracker.R}，250）
});
});

是的，这是一个好主意，但它不能完全满足我的需要。这些按钮是一个备用按钮，但它们将在同一时间可见，我不能保证用户不会尝试同时使用滑动和单击。我真的认为有一种简单的方法可以从onclick调用中调用animate left/right。我要么在您的swip回调中将Tracker更新为全局变量，要么找到一种不向用户呈现这两种体验的方法。能力检测？保持追踪器的正确性现在应该没那么困难了。你能在成功刷卡时触发密码吗@黑曜石hanks@sal niro我会用它。谢谢你
$(function() {
    var width = $('.Page').width();
    var pages = $('.Page').length;
    var tracker = { 'R': 0 }

    $('#Right, #Left').click(function() {

        $(this).attr('direction') === 'R' ? 
            ((tracker.R < (pages - 1) ? tracker.R += 1 : pages)) : 
            (tracker.R > 0) ? (tracker.R -= 1) : 0;

        $('.Swiper').animate({ 'scrollLeft': $('.Page').width() * tracker.R  }, 250)
    });
});