Ionic Slide-Box showing double the items on pager?

ionic-v1
1

Hello, i am trying to do a state where there is a ion-slide-box showing the products from a reseller i have. So, i am using the ng-repeat directive to do so, and it works fine. But when i put the pager on the slide box, it shows 4 dots (my products array only have 2 items…). Here is a piece of code:

<!-- lista de produtos -->
  <ion-slide-box
  	 does-continue="true"
  	 show-pager="true">
    <ion-slide ng-show="revenda" ng-repeat="produto in revenda.produtos">
	    <div class="card" style="text-align:center;">
	      <div class="item item-text-wrap">
	        <img src="img/ionic.png">
	        <br /><br />
	        <b>{{produto.title}}</b>
	        <br /><br />
	        <b>{{produto.price | currency}}</b>
	        <br /><br />
	      </div>
	    </div>
    </ion-slide>
  </ion-slide-box>

Note: ‘produto’ in this case means products. Plus, i am getting this information from a JSON object passed through $stateParams.

I just wanted to know why the number of dots is duplicated on the slide-box.

Thanks in advance,
Bruno

2

Same problem here @brunodb3. How can I solve it? Any suggestion?

Thanks in advance.

3

Hello @ramon, i have been trying to fix this for some time now, but since it’s not a critical feature (for now at least) i’m more focused on my app’s functionalities, so i just changed the pager to hidden

<ion-slide-box show-pager="false">

Whenever i get back to this issue, i will try to solve it again, but so far, i didn’t have any problems with it being like this. (I only use the slide-box to show some images, not really using it’s informations so far)

4

OK.
Thanks @brunodb3.

5

Seeing the same issue, when the underlying collection changes and I already swiped at least once.

I have some slides (they are images) that change after a button press. When the collection changes, the slides update and the pager changes as well. However, if I first change slides, then change the collection, the pager duplicates. Additionally, if I move to the second slide, then change the collection, the new collection is displayed but the second slide is active. It seems like the pager is not getting reset when the collelction changes.

7

I have same problem, do you have solved this issue??

8

I have tried this :

$ionicSlideBoxDelegate.slide(0);
$ionicSlideBoxDelegate.update();

The index is reset to 0, but the number of bullet is not reset

1 Like
9

So this is a issue with slide box’s does-continue and only having 2 slides.
Could you open an issue for this?

10

Yes, the problem is that i have an array of say, 2 values, and when i put a ng-repeat on a slide box, there are double the dots (or slides), wich in this case is 4. I have changed the design of my app, so i’m no longer using this feature, but it might be occuring with other people too.

I’m quite new to the Ionic Forums and all, where should i open an issue for this?

11
12

I just opened the issue at GitHub :wink:

13

Was this issue ever sorted? I am having the problem where I have one ion-slide-box with many ion-slides which are rendered using ng-repeat. However if I change the ng-repeat array after sliding once or more, and calling:
$ionicSlideBoxDelegate.slide(0);
$ionicSlideBoxDelegate.update();

…the slide changes correctly but the paging icons are wrong.

I debugged the ionic code and it looks like when update()is called, the slide count is including all the previous array’s slide still, which all have .ng-leave class on them

Any ideas on a fix?

14

Believe it or not, I just found a resolution to this.

One may be to update to the recent Ionic 1.2 release which uses a new implementation of ion-slide-box but havent tried that.

I fixed the issue after reading this: https://github.com/driftyco/ionic/issues/3683

Add $animateProvider.classNameFilter(/^((?!(no-animate)).)*$/); to app.config

And then to add the no-animateclass on the ion-slide elements that had ng-repeat

My initial thoughts were correct; the page had extra dots due to the removal animation on the old slides when updating the entire slide list.

Hoorah!