Adding left/right arrows to ion-slide-box


I’m using the ion-slide-box directive to create a guided tour feature in an app. Each slide in the slide-box shows part of the tour.

In order to make it clearer to the user that they can slide either left or right between slides I’d like to add both left/right arrows to each slide so they can see that the slides go both ways. While the pager feature helps it doesn’t show the user that they can slide left or right.

Does anyone know how I can add these arrows or if there is a better directive I could use for this feature?


1 Like

Also wondering about this - seems a bit of a hack to style the arrow to be next to the slider-pager

I also need to add a left and right arrow to my slide box because of UX (the user is not aware he can move through slides!)
How can I copy the “” web page slide box behaivor to my App? This slide box provides the a pager and the left & right arrows!


Hi Stephen! At this post there is an answer and a codepen where you can see it in action:

just scroll down a bit of answers and you will see a codepen with slider and arrows.
Hope it helps :wink:

1 Like

Hi Guys,
i am trying 3 slide boxes on same page.
but arrows are not working on it.

can anyone help me with it.

it worked fine after i added $getByHandle(slide) on next and save button.