Ion-slide customize

ionic-v1
1

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-content>
<ion-slide-box on-slide-changed="slideHasChanged($index)">
<ion-slide>
<div class="box blefaroplastica">`<h1>Blefaroplastica</h1>`<p>some text</p>
</div></ion-slide>
<ion-slide>
<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:

2

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

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

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?

4

sorry, its work (I refer the codepen link)

5

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

6

ok cool !

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

<ion-slide>
<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
	</button>
	<button class="button button-clear button-positive">button 2</button>
</div>
</div>
</ion-slide>
1 Like
7

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?

Thanks

8

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

9

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