Dynamically add and remove slides from a slidebox

ionic-v1
1

I’m wanting to remove and add slides from a slidebox dynamically in order to prevent two many elements being created on the dom.

At the moment I have a list of a bunch of items. I want to represent this list as: prev-prev-item, prev-item, middle-item, next-item, next-next-item. I would start at middle item, on going next slide I want to remove prev-prev and add on a next-next-next, on going prev slide i want to remove next-next and add prev-prev-prev. However doing so seems to cause strange issues with disappearing slide content.

Here’s a brief demo with two slides: http://codepen.io/anon/pen/vhgBq

What happens here is I add a new slide and remove the first. The slidebox should never have a length longer than 2.

2

Hi @duffy, I need to do the same thing as you.

I edited your pen and it’s almost working, except that the function I’m using to remove the first item of the array is removing 2 itens and I can’t get to know why!

PS: oh, also I did it with 3 slides, it was easier for me to think the logic.

3

Ok, there is only one explanation for this, does $ionicSlideBoxDelegate.update(); call the on-slide-changed function again?

4

Actually it was the $ionicSlideBoxDelegate.slide(1); that called the slideChanged() function again.

So I modified it a bit, I hope it will help:

1 Like
5

Hey @somentelucas , I wanted to thank you for your example since I’m trying to do the same thing. I had two remaining issues that I’ve solved now:

  • I didn’t know how to also add slides on the left side dynamically and
  • the animation was not 100% correct (an incorrect slide was being displayed for a short amount of time).

If anyone is interested in my updated example: http://codepen.io/carina/pen/eGDym

6

Hi @carina, I also needed to add slides dynamically on the left side and I used a similar approach :-]
My only problem now is the height of the slides are not being updated (always the height of the biggest slide). There seems to be a solution here, but I haven’t tested it yet. In case you’re having a similar problem, the post is this one.

7

That is indeed helpful, thanks!

8

For height issue, use content directive inside slide directive not outside.

<ion-slide-box><ion-slide ng-repeat=item in items><ion-content >{{item}}</ion-content></ion-slide></ion-slide-box>
9

Here you are getting array of 3 items every time with slide index as 1. This is unbounded going forever in both direction.

What If you have an array of max N items to restrict the slide show…

  1. At array start, current index 0, you will have items [0,1] instead of [-1,0,1]
  2. At arrat end, current index N-1, you will have items [N-2, N-1]

One approach is make slide box cyclic

  1. At current index 0, you will have items [N-1, 0,1]
  2. At current index N-1, you will have items [N-2, N-1, 0]
10

I’m not sure if this is a question but you are right, limits will in most cases be necessary. In my case, I will have at least a limit on the left side (on the start of the list).

I will extend my example and post an update here in case it’s useful for you but it will take me a couple of days since I’m pretty swamped with work at the moment.

11

Yes that will be useful. I have worked out a solution where at start of list, active slide index will be 0 with [0,1] slides. At the end of list, active slide index will be 1 with [N-2,N-1] slides. In between active slide index will be 1 with three slides.
I see little flicker when going forward/backward on desktop chrome. BUT on android (galaxy s3, kit kart) this worsens. When I move to next slide, it moves to next slide, then move to previous one finally settling on next slide again. Similar case with going backwards.

1 Like
12

@outerbound I am trying to do the same thing in my app and found this post. I have the same flickering and issues with the slide function that you are mentioning. Did you ever find a solution for this?? Any help appreciated.

13

@MarcoAppMaker no, flicker still exists. Ionic has plans to refactor slidebox big time to handle this case and many others. Waiting for that release…