Slide Box with only two slides creates 4 slides in the view


#1

I am adding a simple slide box into my app and when I reduce the number of slides to two I can in fact see 4 slides in the inspector and the pages highlights correctly on the first two slides.

When I change the number of slides to 3, the pager functions correctly and and there three slides (correctly) shown in the inspector.

Any idea why this might be happening?

I should also mentions that removing does-continue=“true” from the ion-slide-box element div will produce the correct number of slides but I need mine to loop.

<ion-slide-box does-continue="true">
            <ion-slide>
                <div class="box blue">
                    <button ng-click="nextSlide()">Next slide!</button>
                </div>
            </ion-slide>
            <ion-slide>
                <div class="box yellow">
                    Slide 2!
                </div>
            </ion-slide>
        </ion-slide-box>

Thanks!


#2

Below is an updated for of an ionic codepen, modified to show a broken pager with a loopoing slidebox with two slides.

See the Pen SlideBox with broken pager by Jay Hoots (@hootsieroll) on CodePen.


#3

Hello,

the fun part is that i read your post first, and two hours later i encountered the same thing…

If you look at the source code (i.e. ionic.js), you can see this part :

  // set continuous to false if only one slide
  if (slides.length < 2) options.continuous = false;

  //special case if two slides
  if (browser.transitions && options.continuous && slides.length < 3) {
    element.appendChild(slides[0].cloneNode(true));
    element.appendChild(element.children[1].cloneNode(true));
    slides = element.children;
  } 

So, by cloning the first and second slide, we obtain 4 slides…
Don’t know exactly why at this point…

Second funny thing : when i look at your codepen, the pager (4 dots) is wrapping to 2 different lines, and I see only the first 2 dots at first (I have to expand the height of the result pane to plainly see the pager with 4 dots).

The Ionic Team said in this post :

Slidebox is being revamped to be much more performant

I’m waiting for this, because i’m fighting for days to get a good-looking and working solution with dynamic slides.


#4

Thanks for the update elSolo, I’m looking forward to seeing this in a future release. We already use a simple ‘swipeable’ directive to navigate between views but I’m hoping to implement the slidebox due to it’s ease of use.

Cheers.


#5

So did you guys figure out any solution for this issue? It’s been like 3 days I’m searching for solution but biting dust every time.