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

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

javascript angularjs css

如何使用translate3d和javascript限制水平滚动,javascript,angularjs,css,Javascript,Angularjs,Css,我正在为angularJS创建一个简单的滑块，我只想在单击next和prev时限制项目的滚动。我不知道如何继续，我需要一些帮助我到目前为止所做的一切仅限Javascript/AngularJS/CSS3代码。请不要使用插件、库或jQuery。提前感谢。在此处进行了编辑：将slideAmount更新为默认值0（另一个设置导致不必要的单击以开始进行幻灯片）添加了slideCurrent变量-默认为0（这会跟踪您在哪个幻灯片上）在$scope.prev函数中添加了if（slideCurre

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

我到目前为止所做的一切

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

在此处进行了编辑：

将
```
slideAmount
```
更新为默认值
```
0
```
（另一个设置导致不必要的单击以开始进行幻灯片）
添加了
```
slideCurrent
```
变量-默认为
```
0
```
（这会跟踪您在哪个幻灯片上）
在
```
$scope.prev
```
函数中添加了
```
if（slideCurrent==0）{return}
```
（这会阻止您通过第一张幻灯片）
在
```
$scope.next
```
函数中添加了
```
if（slideCurrent==$scope.projects.length-1）{return}
```
（这会阻止您通过最后一张幻灯片）

添加了

slideCurrent--

到

$scope.prev

和

slideCurrent++

到

$scope.next

（以增加/减少幻灯片）

将
```
slideAmount
```
更改为
```
160
```
，而不是
```
200
```
（每张幻灯片为160px，因此可以正确排列）