Ion-slide-box issue with http call

ionic-v1
1

I am using ion-slide-box for an image slider. I am making an http call to get the image url’s array. But the rendering of the images is not working fine.

Initially i am getting only one image. If i re size the plunker window, then i am getting all the images with markers below. I am not sure why initially i am getting only one image with no markers at all.

If i don’t use ng-repeat, then it is working fine. But the number of images can vary. So i have to use ng-repeat for sure.

plunker example

html

<ion-slide-box >
  <ion-slide ng-repeat="img in data.prod_1.prod_images" style="text-align:center;" ng-click="">
     <img ng-src="{{img}}" alt="" width="200px;"/>
   </ion-slide>
</ion-slide-box>

Can some one please help me on this.

2

Check this out… Calling $ionicSlideBoxDelegate.update() fixes your issue.

3

Thank you so much @sreekanth. I didn’t find lot of information in the official docs page. Could u please let me know how it works?

And also if you can stop and run the plunker code you will see five markers at the bottom of the page when the page loads for the first time. But actually there are four images only, which we are receiving from the server. And those five markers are disappearing immediately and only four are visible after a fraction of second. What could be the reason for this issue?

4

You should check in your template of there are images and only then add the slide-box:

<ion-slide-box ng-if="data.prod_1.prod_images.length">

Documentation for update-function:

update()
  Update the slidebox (for example if using Angular with ng-repeat, resize it for the elements inside).
5

But this is not resolving the above issue i mentioned. I mean even though i am getting only 4 images from the server, it is showing 5 markers for a fraction of time and then it is showing 4.

6

@bengtler is right. I have updated the plunkr code, i don’t see the additional marker now.

7

Thank you so much @sreekanth and @bengtler :smile: :smile: