Position ion-slide-box's pager underneath

ionic-v1
1

Hi folks!

How can I move the pager so that it doesn’t overlay content of my slides?

HTML hierarchy:

<div class="card">
    <div class="item">
        <ion-slide-box>
            <ion-slide>
                <div class="row" >
                    <div class="col">
                        ...

Thanks!

2

You can use some css to change it’s positions.

.slider-pager{}

3

Thanks! I wasn’t sure whether it’s a bug, my mistake, or undocumented stuff.

4

@mhartington maybe you can help me… I want to place the .slider-page{} above the nav-bar of a side-menu i.e. to have a greater z-index but I do not know which of the other elements I should give a relative positioning since most of them are in absolute positioning.
Thanks.

5

Hello Salutis, Did you get this to work for you? I want to change the slider also but I having problems with the z-index. What I want to achieve is have the sliders appear on the navbar and stay fixed there so that it will appear no matter at the slide I move to and show the indication of the slide I am on.

Thanks

6

hello, please can you have a look and the query I left regarding the .slider-page{} css. Thanks!

7

At the moment its not possible with the current implementation of slide-box

8

Thanks! It will be a nice feature to have though.

Br.

9

Here is one example of how one can override default slide pager position by creating custom slide pager. I’ve modified one example of dynamic slide box on Codepen. The slide pager is put just below the main title.

The idea is to create one parent controller (in example MainCtrl). In the template this is one div around all of the content. First element in this div is customSliderPager component. This way one can position slide pager anywhere on screen. Second thing is to emit a custom event everytime slide index changes (in slideChanged method) with the value of current index.
Then, in the parent controller, catch event and update currently selected page.

I don’t know if this a correct approach or not since I’ve just started learning AngularJS and Ionic.

10

Hello bokboki2002,

Thanks will have a go @ this and see if works.

Cheers.