2017-10-10 4 views
0

J'essaie de créer des diapositives dans ionique avec le composant ions-diapositives, ce dont j'ai besoin est de changer seulement les images sur les diapositives mais pas les boutons ou les interactions d'interface. Est-ce que de toute façon je peux y arriver?Changement d'images dans les diapositives ioniques et pas les boutons

Merci beaucoup.

Mon code est le suivant:

<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> 

Répondre

0

L'affaire est que vous utilisez vos boutons à l'intérieur d'un toboggan et il va aller quand vous changez votre diapositive, vous devez utiliser votre boutons en dehors de votre curseur et avec la position absolue de sorte qu'il peut aller sur le curseur.

<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> 

votre css

.over-slider{ 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

Le reste de votre css est à vous.

Espérons que cela aide.

+0

Merci Gabriel, ça a marché! –

+0

@JosePabloBrotons vous êtes les bienvenus: D ne pas oublier d'accepter ma réponse comme correcte. –