Two ion-slides in one page


#1
<ion-slides options="options1" slider="data1.slider">
    <ion-slide-page>
      <div class="box blue"><h1>BLUE1</h1></div>
    </ion-slide-page>
</ion-slides>

<ion-slides options="options2" slider="data2.slider">
    <ion-slide-page>
      <div class="box blue"><h1>BLUE2</h1></div>
    </ion-slide-page>
</ion-slides>

$scope.options1 = {
  loop: false,
  effect: 'flip',
  speed: 500,
};

$scope.options2 = {
  loop: false,
  effect: 'flip',
  speed: 500,
};

$scope.$on("$ionicSlides.sliderInitialized", function(event, data1){
  $scope.slider1 = data1.slider;
});

$scope.$on("$ionicSlides.sliderInitialized", function(event, data2){
  $scope.slider2 = data2.slider;
});

in button:
$scope.slider1.slideTo(2, 500); // Problem: the second slider move, but slider1

Can ionic two ion-slide in one page?
and marry christmas! :slight_smile:


#2

@taylormaster Yes, very well more than two ion-slide can be on a single html page and those slides could even look more pages

     </ion-slide>

     <ion-slide>

     </ion-slide>

#3

Hello!
I think so initialize two different ion-slides not ion-slide.
Here are two ion-slides, when initialize first slides, then slideTo() work well, after second slides init, slideTo() work but this control second slides


#4

Here is example what is my question:


#5

so ionic doesnt know this?