One way to simplify your life is by utilizing an external plugin that specifically caters to this task. However, if you prefer a custom solution, I have managed to create one without relying on jQuery. The magic mainly lies in CSS with some additional functionality in JavaScript. I have encapsulated everything within a directive as all DOM manipulation should ideally be handled within directives. Here's a potential starting point for you:
script.js
var app = angular.module("app", []);
app.controller("mainCtrl", function($scope) {
});
app.directive('elements', function() {
return {
restrict: 'E',
templateUrl: 'element.html',
link: function($scope, $element, $attrs) {
$scope.elements = [{
id: 1,
title: 'title1'
}, {
id: 2,
title: 'title2'
},
// Remaining elements omitted for brevity
]
let elementPos = 0;
$scope.moveSlide = () => {
elementPos+=4;
document.querySelectorAll(".element").forEach(elem => {
let element = angular.element(elem);
if (elementPos>=$scope.elements.length){
document.querySelectorAll(".element").forEach(elem => angular.element(elem).css('margin-left', '15px'));
elementPos=0;
return;
}else if (elementPos >= element.attr('order')){
element.css('margin-left', '-100px');
}
});
}
}
}
});
element.html
<div class="left-arrow"> < </div>
<div class="container">
<div class="element-container" style="width:{{elements.length*115}}px">
<div class="element" order="{{$index+1}}" ng-repeat="n in elements">
{{n.title}}
</div>
</div>
</div>
<div class="right-arrow" ng-click="moveSlide()"> > </div>
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app" >
<h1>Hello Plunker!</h1>
<elements></elements>
</body>
</html>
style.css
.element {
width: 100px;
height: 100px;
background: orange;
margin-left: 15px;
display: inline-block;
transition: 1s all;
}
.container {
display: inline-block;
padding: 10px 0;
height: 100px;
width: 475px;
background: #dfdfdf;
overflow: hidden;
}
.left-arrow {
height: 20px;
display: inline-block;
position: relative;
width: 20px;
cursor:pointer;
top:-50px;
}
.right-arrow {
height: 20px;
display: inline-block;
position: relative;
width: 20px;
cursor:pointer;
top:-50px;
}