如何使用translate3d和javascript限制水平滚动

Question

我正在为angularJS创建一个简单的滑块，我只想在你点击下一个和上一个时限制项目的滚动。我不知道如何继续，我需要一些帮助。

到目前为止我做了什么。

JSBIN

仅限Javascript / AngularJS / CSS3代码。请不要插件，库或jQuery。提前谢谢。

Answer 1

在此处进行了编辑：http://jsbin.com/liqomeya/4/edit

• 将slideAmount更新为默认为0（其他设置导致不必要的点击以开始推进幻灯片）
• 添加slideCurrent变量 - 默认为0（这可以跟踪您正在使用的幻灯片）
• 将if (slideCurrent == 0) { return }添加到$scope.prev函数中（这可以防止您浏览第一张幻灯片）
• 将if (slideCurrent == $scope.projects.length - 1) { return }添加到$scope.next函数中（这可以防止您浏览最后一张幻灯片）
• 将slideCurrent--添加到$scope.prev，将slideCurrent++添加到$scope.next（为了增加/减少幻灯片）
• 将slideAmount更新更改为160而不是200（每张幻灯片为160px，这样可以使其正常排列）