How to limit horizontal scrolling using translate3d and javascript

Question

I'm creating a simple slider for angularJS and I just want to limit the scrolling of the items when you click the next and prev. I don't know how to proceed and I need some help here.

What i've done so far.

JSBIN

Javascript/AngularJS/CSS3 codes only. No plugin, library or jQuery please. Thanks in advance.

Answer 1

Made an edit here: http://jsbin.com/liqomeya/4/edit

• updated slideAmount to default as 0 (the other setting caused an unnecessary click to start progressing the slides)
• added slideCurrent variable - defaulted as 0 (this keeps track of which slide you're on)
• added if (slideCurrent == 0) { return } to the $scope.prev function (this prevents you from going past the first slide)
• added if (slideCurrent == $scope.projects.length - 1) { return } to the $scope.next function (this prevents you from going past the last slide)
• added slideCurrent-- to $scope.prev and slideCurrent++ to $scope.next (in order to increment/decrement the slide)
• changed slideAmount updates to 160 instead of 200 (each slide is 160px so this makes it line up properly)