Mise en œuvre de diapositives d'ions dans ion-menu ne fonctionne pas

J'essaie d'implémenter des "images coulissantes" dans le menu latéral de Ionic-3.Mise en œuvre de diapositives d'ions dans ion-menu ne fonctionne pas

Après mon code:

<ion-menu [content]="content"> 
    <ion-content> 
     <ion-slides> 
      <ion-slide> 
       <img class="slide-image" src="img1.png"> 
      </ion-slide> 
      <ion-slide> 
       <img class="slide-image" src="img2.png"> 
      </ion-slide> 
      <ion-slide> 
       <img class="slide-image" src="img3.png"> 
      </ion-slide> 
     </ion-slides> 

     <ion-list> 
      <p>some menu items</p> 
     </ion-list> 
    </ion-content> 
</ion-menu> 

<ion-nav [root]="rootPage" #content></ion-nav>

Les éléments sont rendu correctement, mais le problème est que le <ion-slide> se comporte comme vue défilement horizontal dans le menu latéral.

J'ai essayé de désactiver le geste de balayage du menu latéral, mais le comportement de <ion-slide> persiste.

Même j'ai essayé d'utiliser slideNext et slidePrev méthode de Slides mais ils ne fonctionnent pas.

Y a-t-il un moyen de mettre en œuvre les images coulissantes dans le menu latéral en utilisant Ionic-3 ou une bibliothèque tierce?

Source

2017-06-02 Rohit Gupta

Je ne comprends pas quel est le problème? Comment voulez-vous que le curseur se comporte? –

@JoseRojas Je veux me comporter comme "diapositive". Je veux dire quand je défile un peu à gauche, il devrait automatiquement glisser vers l'image diapositive suivante, mais il suffit de faire défiler ce "petit peu" comme un rouleau horizontal. Quand je mets le même code '' dans un corps de page, il se comporte parfaitement. –

En vérifiant les glissières d'ions dans le menu, le comportement de celles-ci est normal dans le sidemenu. Jetez un oeil dans le lien this. ces diapositives ne sont que des diapositives avec un arrière-plan de différentes couleurs.

la mise en œuvre est dans la partie:

@App({ 
    template: ` 
    <ion-menu [content]="content"> 

     <ion-toolbar> 
     <ion-title>Pages</ion-title> 
     </ion-toolbar> 

     <ion-content> 
     <ion-slides pager> 

      <ion-slide style="background-color: green"> 
      <h2>Slide 1</h2> 
      </ion-slide> 

      <ion-slide style="background-color: blue"> 
      <h2>Slide 2</h2> 
      </ion-slide> 

      <ion-slide style="background-color: red"> 
      <h2>Slide 3</h2> 
      </ion-slide> 

     </ion-slides> 
     </ion-content> 

    </ion-menu> 

    <ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav> 

    ` 
})

Source

2017-06-07 15:28:40

Mise en œuvre de diapositives d'ions dans ion-menu ne fonctionne pas

Répondre

Questions connexes