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

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">
                <div class="box blue">
                    <button ng-click="nextSlide()">Next slide!</button>
                <div class="box yellow">
                    Slide 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.


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) {
    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.

1 Like

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.


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.