Looking to create a dynamic slider showcasing multiple players using ng-repeat in Angular 1.6. The goal is to have prev/next buttons within the ul>lis to navigate through the array of players and view them one by one.
HTML----sliderdemo.html
<div ng-controller="SliderDemoCtrl">
<div class="champions-slider">
<ul class="team-members list-inline text-center" style="display:flex" >
<li ng-repeat="player in players | limitTo: 4" style="padding:10px">
<div class="img-holder">
<a href="/player/{{ player.name }}"><img ng-src="{{ player.image }}" alt="{{player.name}}" width="20px"></a>
</div>
<strong class="name">{{ player.name }}</strong>
</li>
</ul>
<a href="#" class="btn-prev" ng-click="?????">Prev</a>
<a href="#" class="btn-next"ng-click="?????">Next</a>
</div>
</div>
JS controller---slider.demo.controller.js
var myApp = angular.module('slider.demo', []);
myApp.controller('SliderDemoCtrl',['$scope',function($scope){
$scope.players = [
{
image:"http://placehold.it/500/e499e4/fff&text=1",
name: "tes 1"
},
{
image:"http://placehold.it/500/e499e4/fff&text=2",
name: "tes 2"
},
{
image: "http://placehold.it/500/e499e4/fff&text=3",
name: "tes 3"
},
{
image:"http://placehold.it/500/e499e4/fff&text=4",
name: "tes 4"
},
{
image:"http://placehold.it/500/e499e4/fff&text=5",
name: "tes 5"
},
{
image: "http://placehold.it/500/e499e4/fff&text=3",
name: "tes 6"
}
];
}]);
Take a look at the plunkr for more details: https://plnkr.co/edit/J7dxeMfM22ju5gpZl5ri?p=preview
Any assistance will be highly appreciated.
Thank you!