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

Question

我正在为 angularJS 创建一个简单的 slider ，我只想在您单击下一个和上一个时限制元素的滚动。我不知道如何继续，我需要一些帮助。

到目前为止我做了什么。

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，因此可以正确排列)