The best practice is to make a directive for the slider but you could do something like this. Its missing some code but this is the approach you should have.
In your html:
<div id="image-slider" ng-style="sliderStyle">
<div class="image" ng-repeat="(key, source) in imagesServingUrl track by $index" ng-style="imgStyle">
<img class="productImage" ng-src="{{source.serving_url}}" ng-class="{'hideImg':(current!=key), 'showImg':(current==key)}" />
<span class="arrow-right" ng-click="next(current+1)"/>
<span class="arrow-left" ng-click="prev(current-1)"/>
</div>
</div>
`
And in your css:
img.showImg {
opacity: 1;
-webkit-transition: 0.5s cubic-bezier(0.49, 0, 0.5, 1) all;
-moz-transition: 0.5s cubic-bezier(0.49, 0, 0.5, 1) all;
-ms-transition: 0.5s cubic-bezier(0.49, 0, 0.5, 1) all;
-o-transition: 0.5s cubic-bezier(0.49, 0, 0.5, 1) all;
transition: 0.5s cubic-bezier(0.49, 0, 0.5, 1) all;
}
img.hideImg {
opacity: 0;
-webkit-transition: 0.5s cubic-bezier(0, 0.5, 1, 0.47) all;
-moz-transition: 0.5s cubic-bezier(0, 0.5, 1, 0.47) all;
-ms-transition: 0.5s cubic-bezier(0, 0.5, 1, 0.47) all;
-o-transition: 0.5s cubic-bezier(0, 0.5, 1, 0.47) all;
transition: 0.5s cubic-bezier(0, 0.5, 1, 0.47) all;
}
And in your controller
$scope.next = function(next) {
$scope.current = next;
$scope.percent -= 100;
return $scope.imgStyle = {
transform: 'translateX(' + $scope.percent + '%)',
width: $scope.sliderWidth,
height: $scope.sliderHeight
};
};