I am trying to create some slides in Ionic with the ion-slides component, what I need is to change just the images on the slides but not the buttons or interface interactions. Is there anyway I can achieve that?
Thank you very much.
My code is this:
<ion-slides pager>
<ion-slide style="background-image:url(../../assets/img/disco.jpeg)">
<button ion-button round small>Entrar sin cuenta</button>
<div>
<h2>Todas las discotecas en la palma de tu mano</h2>
</div>
<div>
<button ion-button round small>Conéctate con Facebook</button>
</div>
<div>
<button ion-button round small>Crear cuenta</button>
</div>
<div>
<button ion-button round small>Crear cuenta</button>
</div>
</ion-slide>
<ion-slide style="background-color: green">
<h2>Slide 2</h2>
</ion-slide>
<ion-slide style="background-color: green">
<h2>Slide 3</h2>
</ion-slide>
<ion-slide style="background-color: green">
<h2>Slide 4</h2>
</ion-slide>
The case is that you're using your buttons inside an slide and it'll go away when you change your slide, you need to use your buttons outside your slider and with position absolute so it can go over the slider.
<ion-slides pager>
<ion-slide style="background-color: green">
<h2>Slide 2</h2>
</ion-slide>
<ion-slide style="background-color: green">
<h2>Slide 3</h2>
</ion-slide>
<ion-slide style="background-color: green">
<h2>Slide 4</h2>
</ion-slide>
</ion-slides>
<div class="over-slider">
<button ion-button round small>Entrar sin cuenta</button>
<div>
<h2>Todas las discotecas en la palma de tu mano</h2>
</div>
<div>
<button ion-button round small>Conéctate con Facebook</button>
</div>
<div>
<button ion-button round small>Crear cuenta</button>
</div>
<div>
<button ion-button round small>Crear cuenta</button>
</div>
</div>
your css
.over-slider{
position: absolute;
top: 0;
left: 0;
}
The rest of your css is up to you.
Hope this helps.