Slidebox inside tabs

ionic-v1
1

I’m having trouble getting a slidebox to work.

I used the tabs seed project, changed some code and just inserted the demo code from the documentation for a slide-box.

Here is a plunker of the app:

The slide-box is in the data tab (tab-data.html).

It looks like everything works right: The directive is recognized etc. but the slide-box does not work?

1 Like
2

Its a markup/css issue. Take a look
http://embed.plnkr.co/IV71ZCDncRrD65f4HEVY/preview

Heres the css I added

  .slider{
        position: absolute;
        top:0;
        bottom:0;
        left: 0;
        right: 0;
      }
      
      .slider-pager{
        bottom:50px;
      }

and the slide-box markup

<ion-view title="{{tab.name}}">
        <ion-slide-box show-pager="true">
            <ion-slide>
                <ion-content><h1>BLUE</h1></ion-content>
            </ion-slide>
            <ion-slide>
                <ion-content><h1>BLUE</h1></ion-content>
            </ion-slide>
            <ion-slide>
                <ion-content><h1>BLUE</h1></ion-content>
            </ion-slide>
        </ion-slide-box>
</ion-view>
1 Like
3

Should you always add these css rules to make the slider work? Thanks for the reply!

4

You don’t need to, the slide box is set up to take up as much space as the content inside it needs. But if you want to do a full page slide-show and scroll the content inside, this setup tends to work

1 Like
5

Is the css still valid? I tried editing the seed as advised above. The version I’m using is v1.0.0-beta.6.
When I apply the css the slidebox does not appear at all. Without the css the slidbox doesn’t take the full height of the page so you see the 3 slide images inside the content