Ionic 1.2 how to go to a specific slide

1

Hey Guys,

i am trying to navigate to different slides using a side menu. Could a graceful soul maybe provide a simple CodePen example on how to jump to a specific slide by clicking on a menu entry?

Help is HIGHLY appreciated…

2

This might work but is untested, so beware.

You could use $ionicSlideBoxDelegate.next(); twice or even more to get to a chosen slide.
If you create a method that executes when clicking an item in de slidemenu with a parameter of the destination slide index, you could use that value and the value of the currentIndex to calculate how many times you have to execute $ionicSlideBoxDelegate.next();.

Is this clear enough?

3

Thanks Matt,

well the Problem is that i am using the new slides component from ionic 1.2 I was using this approach with the old slid-box component:

 $scope.$ionicSideMenuDelegate = $ionicSideMenuDelegate;
  $scope.gotoSlide = function(index) {
  $scope.$broadcast('slideBox.setSlide', index);
};

But this is of course not working with the new slide box…`

4

First, make sure that you use $ionicSlideBoxDelegate instead of MenuDelegate.

Aside form that, using the new slide-box (swiper), use slideTo(index) on your swiper instance.
Using the parameter, you can specifiy the correct slide index (starting at 0)

5

Thanks Matt – sorry i am not a really experienced developer :slight_smile: I was trying to follow your explanation doing this:

.controller('AppCtrl', function($scope, $ionicModal, $ionicSideMenuDelegate, $ionicSlideBoxDelegate, $timeout) {

  // With the new view caching in Ionic, Controllers are only called
  // when they are recreated or on app start, instead of every page change.
  // To listen for when this page is active (for example, to refresh data),
  // listen for the $ionicView.enter event:
  //$scope.$on('$ionicView.enter', function(e) {
  //});

  $scope.sliderOptions = {
initialSlide: 0,
direction: 'horizontal', //or vertical
speed: 300, //0.3s transition
autoplay: false,//change every second
grabCursor: false //this replaces cursor by a hand when hover slider
  }
  
  $scope.mySwipe; 

   $scope.$ionicSlideBoxDelegate = $ionicSlideBoxDelegate;
  $scope.gotoSlide = function(index) {
  $scope.$broadcast('mySwipe.slideTo', index);
};

In my side menu i am than calling the function like this:

<a class="item item-avatar" menu-close ng-click="gotoSlide(0)"> <img src="img/1.jpeg"> <h2>The Big Lorem Ipsum</h2> <p>An introduction to modern magazines</p> </a>

I am sure that i am doing something wrong…

6

Well, you were on the right track, but the final javascript code just doesn’t cut it.

After $scope.mySwipe, place this code (and discard all your code after that):

$scope.$watch("slider", function(slider) {
    if (slider) {
      $scope.mySwipe = slider;
    }
  })

$scope.gotoSlide = function(index)
{
     $scope.mySwipe.gotoSlide(index);
}

I hope this explains some things :smile:

7

Matt, thanks you very, very much for taking the time! But doing this results in an error when i click on my menu item:

Error: undefined is not an object (evaluating '$scope.mySwipe.gotoSlide')

This btw my slider template:

<ion-slides options="sliderOptions" slider="mySwipe">

8

In $scope.$watch, change “slider” to "mySwipe"
Inside if (slider), do alert($scope.mySwipe). If you see something, then the slider has been found.

9

The do alert($scope.mySwipe) is giving me only a bunch of errors – i am apparently too dumb…