Ionic 1.2: ion-slides

ionic-v1
1

Hi,
I’ve just started to use v1.2 and the lovely swiper, but I ran into a strange issue.
I’m using this simple template within ion-view (actually I’m loading the data async and using ng-repeat)

<ion-slides options="slidesOptions" slider="data.slider">
    <ion-slide-page>
      <div>3</div>
    </ion-slide-page>
    <ion-slide-page>
      <div>1</div>
    </ion-slide-page>
    <ion-slide-page>
      <div>2</div>
    </ion-slide-page>
</ion-slides>

Then problem starts that the pages slide to the second page from the end and the last page is only accessible by right swipe from the first page (I’m not using loop). This is with default options.

I could find any demos yet and the only thing I could do was to splice the first element in my data used by ng-repeat as the last.
Any ideas, what I might be doing wrong?
Thank you

1 Like
2

Hi,

I was just wondering… are you getting the slider into your scope as expected? I tried to set a watch but it didn’t seem to work. Guessing i’m doing something wrong. I don’t have the issue as you described, did you try to use some other startsettings?

3

Nevermind, answered my own question by using dot notation (without it it doesn’t seem to pick it up in the controller?). Nevertheless, maybe you could set the activeIndex to 0 via the options? Did you already try to do that?

4

Known and fixed issue :wink: https://github.com/driftyco/ionic/issues/4792

5

this is how I am doing in

JAVASCRIPT

var mySwipe={}; // globally visible objecct, can be used anywhere visible after initialized in below code
	$scope.$watch('sliderWatcher',function(obj){
		mySwipe=obj;
	});

HTML

<ion-slides slider="sliderWatcher">

6

How do you use this to go to a slide programmatically?

I tried mySwipe.swipeTo(3) but couldn’t get it to work.

7

I’ve used this with success

$scope.data.slider.update(false); 
$scope.data.slider.slideTo(index, 0, false);
8

Thank you petrsimon,

I put your code in the controller where I have the slides, but I am getting undefined.

I just got in and had a few minutes to try it before having to go out again. I will try some more tomorrow.

Thanks again,

quotelight

9

I’m guessing that you didn’t bind the slider object or didn’t wait for the watch.

10

Try this:

HTML:
<ion-slides options="extraOptions" ng-if="selectedSlides" slider="data.slider">

JS:

$scope.data ={}; // globally visible objecct, can be used anywhere visible after initialized in below code

  $scope.$watch('data.slider', function(nv, ov) {
    
    console.log($scope.data.slider);
  })

you can then use $scope.data.slider as needed.

11

I have tried with the swiper options

options: {
direction: 'horizontal',
loop: true,
effect: 'fade',
autoplay: 2000

}

but loop does not work. It stops at the last slide. Maybe there is a conflict with the ionic built in auto-play or does-continue

13

I tried the same code but height more than the viewport height. The page is not even scrollable now. I can’t see any content which is going beyond the page height. Does anyone had similar issue?