Ion-slide customize

Hi all,
I have some questions about differents things but I want start from ion-slide.
So I would customize my ion-slide and I have differents problems about this task.
I create a page in this way:

<ion-view view-title="Trattamenti Viso">
<ion-slide-box on-slide-changed="slideHasChanged($index)">
<div class="box blefaroplastica">`<h1>Blefaroplastica</h1>`<p>some text</p>
<div class="box another">......................</div></ion-slide>

after h1 tag i close the div and ion-slide tag and open another ion-slide tag e so…
now I see some things:
1 is that show-pager is positioned at bottom of slide and I would that its positioned or at the top or between h1 and the p tags;
2 I see that if an ion-slide is height 10 for example, the others slides are height 10, but I would that the slides are in differents height, can I do it? For example I would that each slide can be autoheighted, its height must depends about its content.
3 I would the width of each slide must be 100%, can I do it?
4 how can I add a sub-header for each slide?

Help me :smile:

You should look here : codepen
and more customize CSS : pager to the top :

.slider-pager { top:5px important!}

your solution for slider-pager is right but about the height of the slides don’t work…
I see codepen and so I add a style to the slider

.slider { height:100%}

but it doesn’t work or better I have the same problem about the height of the contents of slides.

And for the others problems? Can you tell me something?

sorry, its work (I refer the codepen link)

but the problem about the height of each slide is not solved…

ok cool !

For the sub-header, you can add a div with class “bar” but overwrite the position to relative :

<div class="box">
<div class="bar" style="position:relative;">
	<button type="button" class="button button-small button-balanced">
	<i class="ion-ios7-plus-outline"></i>
	<button class="button button-clear button-positive">button 2</button>
1 Like

Ok I do it and it’s ok now.

Finally remains the question about height ion-slide that I do this in CSS stylesheet

.slider { height:100% }

but I see that the first slide has a different height about the second slide.
My second slide is heigher than first and so in the first slide remains a big withe space.
How can I solve this?


I think that you must fix the height size on the ion-slide or on the div class=“box blefaroplastica”

ok I try it tonight when I come back home, thanks