My ionic slide box features 4 slides that can be navigated using buttons at the bottom of the screen or by finger-scrolling. The goal is to have the 'active' class added to the button corresponding to the currently active slide.
For instance, if the second slide is active, the second button should have the 'active' class. When transitioning to the third slide, the 'active' class should move from the second button to the third button.
Currently, classes change when clicking on a button but not while scrolling between slides. How can I address this issue using AngularJS?
Link to Codepen: http://codepen.io/lu-kanemon/pen/doBNGz
Here is the code snippet:
menu.html
<ion-view view-title="Menu">
<ion-content class="padding">
<ion-slide-box show-pager="false" on-slide-changed="slideHasChanged($index)">
<ion-slide>
<h1 class="slide-title"> Matches </h1>
</ion-slide>
<ion-slide>
<h1 class="slide-title"> Fitting jobs </h1>
</ion-slide>
<ion-slide>
<h1 class="slide-title"> Interesting events </h1>
</ion-slide>
<ion-slide>
<h1 class="slide-title"> Group conversations with open positions </h1>
</ion-slide>
</ion-slide-box>
</ion-content>
<div class="contacts-filters felix-filters button-bar">
<a class="button button-stable" ng-class="{active: selected=='m'}" ng-click="slide(0); selected='m'"><i class="fa fa-users"></i></a>
<a class="button button-stable" ng-class="{active: selected=='j'}" ng-click="slide(1); selected='j'"><i class="fa fa-suitcase"></i></a>
<a class="button button-stable" ng-class="{active: selected=='e'}" ng-click="slide(2); selected='e'"><i class="fa fa-map"></i></a>
<a class="button button-stable" ng-class="{active: selected=='c'}" ng-click="slide(3); selected='c'"><i class="fa fa-comments"></i></a>
</div>
</ion-view>
MenuCtrl.js
myApp
.controller('MenuCtrl', function($scope, $stateParams, $ionicSlideBoxDelegate){
//switch slides
$scope.slide = function(to) {
$scope.current = to;
$ionicSlideBoxDelegate.slide(to);
}
});