Slidebox and show-pager

ionic-v1
1

Hi

Is there a way on the slidebox to have the pager always show in the screen. ie. my content is longer than the screen size and therefore the pager icons are not visible with out scrolling down.

would be good to force on the screen so user nows they can scroll.

thanks
Darren

2

Hey @darrenahunter, you can apply some css to override the default positioning. I do this in my app to keep my slides at the top, just below the header.

.slider-pager {
	top: 0;
	bottom: initial;
}
1 Like
3

Many thanks mike

I works great for the pager at the top. My css skills are not good enough but is there a way to have the pager at the bottom of the screen - overlaying the slider page if it larger than the screen size. ie. the pager icon stay floating/overlaid on the slider page at the bottom even if scrolling the page vertically

many thanks again

4

How do you have your slides set up? If you’re using an ion-content inside of your slides, you should be fine.

<ion-slide-box>
    <ion-slide>
       <ion-content></ion-content>
   </ion-slide>
</ion-slide-box>
1 Like
5

I don’t have ion-content wrapped around my slides as you suggest - the ion-content is wrapped around the ion-slide-box. I removed my ion-content around my ion-slide-box and added them inside each slide - however that ended up producing nothing in my slides.
my code is like the following:

<ion-view title="{{navTitle}}">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon">
    </button>
  </ion-nav-buttons>
  <ion-content>
    <ion-slide-box show-pager="true">
      <ion-slide>
        <!-- <ion-content> -->
        <div class="card">
          <div class="item item-divider item-thumbnail-left">
            <img ng-src="img/jenny1.jpg">
            <h2>Jenny</h2>
            <p>Physician</p>
          </div>
          <div class="item item-text-wrap">
            <p>
Jenny lots of text just jammed in here. there is enough that the slide or card contents overfills the iphone screen and slide-pager is off the screen. lots of text just jammed in here. there is enough that the slide or card contents overfills the iphone screen and slide-pager is off the screen. lots of text just jammed in here. there is enough that the slide or card contents overfills the iphone screen and slide-pager is off the screen. 
            </p>
          </div>
          <div class="item item-divider">
          </div>
        </div>
        <!-- </ion-content> -->
      </ion-slide>               
      <ion-slide>
        <!-- <ion-content> -->
        <div class="card">
          <div class="item item-text-wrap item-divider item-thumbnail-left">
            <img ng-src="img/nic1.jpg">
            <h2>Nicholas</h2>
            <p>Physician</p>
          </div>
          <div class="item item-text-wrap">
            <p>
Nicholas lots of text just jammed in here. there is enough that the slide or card contents overfills the iphone screen and slide-pager is off the screen.lots of text just jammed in here. there is enough that the slide or card contents overfills the iphone screen and slide-pager is off the screen.lots of text just jammed in here. there is enough that the slide or card contents overfills the iphone screen and slide-pager is off the screen.lots of text just jammed in here. there is enough that the slide or card contents overfills the iphone screen and slide-pager is off the screen.
            </p>
          </div>
          <div class="item item-divider">
          </div>          
        </div>
        <!-- </ion-content> -->
      </ion-slide>       
    </ion-slide-box>   
  </ion-content>
</ion-view>
6

Very odd, I may have to get in touch with the devs about this. Seems that if you put a ion-content directive inside, sizing gets thrown out the window. You can use ion-content inside of a slide and it will work, you just need to apply this css.

.slider{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.slider-pager {
	top: initial;
	bottom: 0;
}

How does this work for you?

7

Thanks Mike

It works perfectly - I bumped the pager up 5px and looks fine.

What would look better I guess would be for the Card header (or top section or div) to fix to the top of the slide and the card footer (ie third section or div) to fix to the bottom of the slide (then the pager is inside this footer) - and then for the body (ie the text) of the slide to do the scrolling. I don’t understand ion-content enough obviously to even give this a go - would it be possible?

Also it looks like you can have many ion-contents on a page - do they need to be siblings or can they be childs as well.

thanks you again - I really appreciate you guys and this forum is by far the most proactive and informative of any I use.

oh and I think we should start an Ionic Team Rocks club

1 Like
8

You mean something like this?

Just play around the sub header and sub footer to get the layout.

9

Thanks again Mike

Something like that however I do prefer the Card layout as I would have to do a bit of css styling to get subheader and subfooter to look like they do in a card layout.

You have given me the ideas though

thank you

10

Hi, how can i make pager fadeIn when start changing slide and fadeOut after slide is changed ?

11

Hello guys i have just started with Ionic / Angular and i came with exactly the same problem today (thanks a lot for your solution @mhartington it saved my day). But still just wondering why this is still happening since your post are from April 2014, is this a bug ? or just you are not suppose to use the ion-content tag inside a slide. Just wondering here tho.

12

this http://codepen.io/ionic/pen/AjgEB is the official code of the slidebox fond here http://ionicframework.com/docs/nightly/api/directive/ionSlideBox/ and the slider stay on the bottom of the page without using any custom css code or nav container … but in my case it stay in the top … and there https://github.com/driftyco/ionic/issues/2396 there are a useful discussion about this.