Ionic Slider Full Screen

ionic-v1
1

imageHi please help me make the to sliders fit to screen but divided into screen equally, I’m also having a white line space at the rght side of the picture…

Heres my code --> home.html

EMPORIA 
<ion-slide-box delegate-handle="image-viewer" on-slide-changed="slideChanged(index)" does-continue="true" show-pager="false">
  <ion-slide ng-repeat="men in featuredMen">
    <div class="item item-image">
      <a href="#/product">
        <img ng-src="{{men.featured_image_url_men}}">
        <font style="position:absolute; top:150px; left:100px; width:200px; height:25px background-color:black; color:white"> {{men.name}} </font>
      </a>
    </div>
  </ion-slide>
</ion-slide-box>
<center><b><p style="font-size: 20px; background-color:black; color:white">MEN</p></b></center>

<ion-slide-box delegate-handle="image-viewer" on-slide-changed="slideChanged(index)" does-continue="true" show-pager="false">
  <ion-slide ng-repeat="women in featuredWomen">
    <div class="item item-image">
      <a href="#/product">
        <img ng-src="{{women.featured_image_url_women}}">
        <font style="position:absolute; top:150px; left:100px; width:200px; height:25px background-color:black; color:white"> {{women.name}} </font>
      </a>
    </div>
  </ion-slide>
</ion-slide-box>
<center><b><p style="font-size: 20px; background-color:black; color:white">WOMEN</p></b></center>

thank you very much…

2

Set the height of ion-slide-box with ng-style. If you have header and footer, just calculate the height of header and footer with some directives. the sample is as follows:

<ion-slide-box on-slide-changed="slideHasChanged($index)" class="slider-content"
               ng-style="{'height': heightScroll - heightFooter - 70  + 'px'}">
3

What I have found is you can wrap the ion-slide-box in a div, then set the contents of the div to be full height with a bit of sass:

.wrapper {
    height:100%;
    width:100%;
    * {
        height:100%;
        width:100%;
    }
}

or, of course, css:

.wrapper * {
    height:100%;
    width:100%;
}