Make button active on specific slide (slidebox)

ionic-v1
1

Hi!,

I am trying to use ion-slide-box instead on tabs, to make it possible to click a button, and then slide to a specific slide.

So far, I’ve been able to go to a specific slide when clicking a button, but I am looking for some help to change the color of the active button.

These are the buttons:

     	<div class="row">
	<a class="col" ng-click="Slide1()">Slide 1</a>
	<a class="col" ng-click="Slide2()">Slide 2</a>
	<a class="col" ng-click="Slide3()">Slide 3</a>
        </div>

And this is the function:

	  $scope.Slide1 = function() {
$ionicSlideBoxDelegate.slide(0, [400]);

}

How can i turn “Slide 1” text white, when that slide is active?

Thanks!

2

Set a $scope variable in your slide-functions --> $scope.activeTab = SlideIndex

in your template you can set a active class an each slide with ng-class… ng-class="{‘active’: activeTab === 0}"

3

Hey! Thanks for your quick answer!

I cannot make it work :/, am I doing it wrong?

	  $scope.Slide1 = function() {
$ionicSlideBoxDelegate.slide(0, [400]);
$scope.activeTab = 0;

}

<div class="col" ng-click="Slide1()" ng-class="{'active': $scope.activeTab === 0}">Slide 1</div>

Thanks

4

sry this was my fault in your template you do not need “$scope.” in front of your variable.
i corrected my previous answer

5

Thanks for your answer once again.

I still cant make it work.

Here is my code.

	  $scope.Slide1 = function() {
$ionicSlideBoxDelegate.slide(0, [400]);
$scope.activeTab = 0;

}

$scope.Slide2 = function() {
    $ionicSlideBoxDelegate.slide(1, [400]);
	$scope.activeTab = 1;

}

$scope.Slide3 = function() {
$ionicSlideBoxDelegate.slide(2, [400]);
$scope.activeTab = 2;

}

					<div class="row">
					<div class="col" ng-click="Slide1()" ng-class="{'active': activeTab === 0}">Slide 1</div>
					<div class="col" ng-click="Slide2()" ng-class="{'active': activeTab === 1}">Slide 2</div>
					<div class="col" ng-click="Slide3()" ng-class="{'active': activeTab === 2}">Slide 3</div>
				</div>

My css looks like this:

.row .col .active { color: #fff; }

I really appreciate your help!