# SlideBox - Add Slides / Stop Swipes

**URL:** <https://forum.ionicframework.com/t/slidebox-add-slides-stop-swipes/363>\
**Category:** ionic-v1\
**Created:** [December 30, 2013, 3:07pm UTC](https://forum.ionicframework.com/t/slidebox-add-slides-stop-swipes/363 "2013-12-30T15:07:32Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Calendee](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/calendee/32/13656_2.png) [@Calendee](https://forum.ionicframework.com/u/Calendee)\
**Post date:** [December 30, 2013, 3:07pm UTC](https://forum.ionicframework.com/t/slidebox-add-slides-stop-swipes/363/1 "2013-12-30T15:07:33Z")

</div>

I’ve been dabbling with the slide box. I’m trying to create an on-boarding process using the Slide Box. Unfortunately, there does not seem to be a way to add slides once configured. It would be nice to be able to inject slides in depending on what actions the user has taken.

Example : Have Slidebox with an intro page, user swipes to reach a registration page. Once they have properly filled out the form and submitted, another slide is added to show a waiting on email verification page. Then, once email is verified, another slide added.

Another thing that would be nice is to prevent sliding to the next &/or previous slides depending on current user actions.

I’ve poked around in slideBox.js and ionicSlidebox.js looking for ways to do this. I’m afraid the code is a bit over my head to implement this myself.

Any suggestions on how to implement this? I see that slideBox.js has appendSlide, prependSlide etc. However, I can’t figure out how to access those methods from within a view controller.

---

<div class="post-metadata">

**Author:** ![Calendee](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/calendee/32/13656_2.png) [@Calendee](https://forum.ionicframework.com/u/Calendee)\
**Post date:** [December 31, 2013, 4:36pm UTC](https://forum.ionicframework.com/t/slidebox-add-slides-stop-swipes/363/2 "2013-12-31T16:36:04Z")

</div>

I’ve submitted a pull request for a feature I’ve added to the SlideBox. I’ll put together some sample code and explanation of how it works shortly.

---

<div class="post-metadata">

**Author:** ![Calendee](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/calendee/32/13656_2.png) [@Calendee](https://forum.ionicframework.com/u/Calendee)\
**Post date:** [January 1, 2014, 2:13pm UTC](https://forum.ionicframework.com/t/slidebox-add-slides-stop-swipes/363/3 "2014-01-01T14:13:48Z")

</div>

Here’s an explanation of the maxViewableSlide directive I’ve added and a demo :

[http://calendee.com/ionic-slidebox-with-max-viewable-slide/](http://calendee.com/ionic-slidebox-with-max-viewable-slide/)

---

<div class="post-metadata">

**Author:** ![scarab9151](https://avatars.discourse-cdn.com/v4/letter/s/e0b2c6/32.png) [@scarab9151](https://forum.ionicframework.com/u/scarab9151)\
**Post date:** [January 23, 2014, 6:06am UTC](https://forum.ionicframework.com/t/slidebox-add-slides-stop-swipes/363/4 "2014-01-23T06:06:42Z")

</div>

Ran into a similar use case for this and came across this post. definitely could use this pulled in.

---

<div class="post-metadata">

**Author:** ![idanwe](https://avatars.discourse-cdn.com/v4/letter/i/b9bd4f/32.png) [@idanwe](https://forum.ionicframework.com/u/idanwe)\
**Post date:** [June 6, 2014, 11:07am UTC](https://forum.ionicframework.com/t/slidebox-add-slides-stop-swipes/363/5 "2014-06-06T11:07:42Z")

</div>

@Calendee Is there any solution/update for this with the latest ionic version?

---

<div class="post-metadata">

**Author:** ![Calendee](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/calendee/32/13656_2.png) [@Calendee](https://forum.ionicframework.com/u/Calendee)\
**Post date:** [June 6, 2014, 11:42am UTC](https://forum.ionicframework.com/t/slidebox-add-slides-stop-swipes/363/6 "2014-06-06T11:42:37Z")

</div>

I don’t believe so. Mine didn’t get pulled in and I don’t think anything like it has ever been added.

---

<div class="post-metadata">

**Author:** ![idanwe](https://avatars.discourse-cdn.com/v4/letter/i/b9bd4f/32.png) [@idanwe](https://forum.ionicframework.com/u/idanwe)\
**Post date:** [June 6, 2014, 11:58am UTC](https://forum.ionicframework.com/t/slidebox-add-slides-stop-swipes/363/7 "2014-06-06T11:58:36Z")

</div>

Did you manage some how to make it work (also it some hacky way)?

---

<div class="post-metadata">

**Author:** ![Calendee](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/calendee/32/13656_2.png) [@Calendee](https://forum.ionicframework.com/u/Calendee)\
**Post date:** [June 6, 2014, 1:21pm UTC](https://forum.ionicframework.com/t/slidebox-add-slides-stop-swipes/363/8 "2014-06-06T13:21:56Z")

</div>

It was quite a hack. You might be better off just injecting slides AFTER the user is allowed to move to the next one. Or using `ng-if` on the slides until the user is allowed to move to the next.

---

<div class="post-metadata">

**Author:** ![idanwe](https://avatars.discourse-cdn.com/v4/letter/i/b9bd4f/32.png) [@idanwe](https://forum.ionicframework.com/u/idanwe)\
**Post date:** [June 6, 2014, 1:33pm UTC](https://forum.ionicframework.com/t/slidebox-add-slides-stop-swipes/363/9 "2014-06-06T13:33:01Z")

</div>

Initially I want to render all the slides and just disable the moving (more simple to manage the slides, don’t need to use `$ionicSlideBoxDelegate.update()` and I want to show the pager for the all wizard )

So it doesn’t come so well, And therefore I’m trying to inject (and managing the pager by myself).  
I’m updating the slides array and call `$ionicSlideBoxDelegate.update()` and then call `$ionicSlideBoxDelegate.next()` but it doesn’t slides to the next.  
I add `$timeout` before I call to `next` and then it slides but the render doesn’t finish yet and it finished after the slide ends

Any propose how to make it smooth?

---

<div class="post-metadata">

**Author:** ![idanwe](https://avatars.discourse-cdn.com/v4/letter/i/b9bd4f/32.png) [@idanwe](https://forum.ionicframework.com/u/idanwe)\
**Post date:** [June 6, 2014, 1:54pm UTC](https://forum.ionicframework.com/t/slidebox-add-slides-stop-swipes/363/10 "2014-06-06T13:54:47Z")

</div>

Just add 50 milliseconds to the `$timeout` and it smooth

tnx:)

---

<div class="post-metadata">

**Author:** ![jajohga](https://avatars.discourse-cdn.com/v4/letter/j/77aa72/32.png) [@jajohga](https://forum.ionicframework.com/u/jajohga)\
**Post date:** [July 17, 2014, 3:49am UTC](https://forum.ionicframework.com/t/slidebox-add-slides-stop-swipes/363/11 "2014-07-17T03:49:24Z")

</div>

Any luck on a prepend slide? Also, I would love to be able to remove slide from the beginning or end of the box.
