Ion-diapositive-box avec une autre diapositive hauteurs

Je suis en utilisant ion-slide-box, mais la question est, mon ion-slides ne sont pas à la même hauteur, de Sorte qu'il définit toutes les ion-slides à la taille des hauteurs. Voici un exemple

  • ion-diapositive 1 hauteur 30px
  • ion-diapositive 2 la hauteur 100px

Donc, ion-slide-box hauteur sera 100px, qui en font un espace vide (70px) dans le slide1. Et lorsque l'utilisateur diapositive en utilisant que de l'espace vide (70px), slider ne fonctionne pas.

Ce que pourrait être la solution/solution de contournement pour avoir le slidebox de travail pour les différents diaporamas hauteurs?

Bonne question! Je veux la réponse aussi! -
rien trouvé de compagnon, mais je suis en train de travailler sur une solution de contournement, en faisant de la hauteur à 100%, mais toujours pas de chance 🙂
même ici. La solution de cette?

OriginalL'auteur sameera207 | 2015-02-09

  1. 5

    Vous pouvez utiliser ceci : 

    .slider-slides{
  display: flex;
  flex-direction: row;
}
    Merci, ça fonctionne!

    OriginalL'auteur Mao

  2. 2

    Si vous voulez une hauteur fixe curseur avec toutes les lames de remplissage le curseur de la hauteur sans laisser aucun espace vide,
    Dans le style.css ajouter ces lignes:

    .slider {
height: 200px; /* slider height you want */
}
.slider-slide {
 color: #000;
 background-color: #fff;
 height: 100%;
}
    Cela conduira à une ligne verticale à gauche du curseur.

    OriginalL'auteur Mithun ck

  3. 1

    texte fort
    si vous utilisez ionique 2
    que
    ajouter un scss.

     .slide-zoom {
  height: 100%;
  }

    et l'importation de cette classe dans 

    <ion-content class=slide-zoom>
   <ion-slides>

   <ion-slide>
 ..............
     </ion-slide>


   <ion-slide>
 ..............
     </ion-slide>
   </ion-slides>


     </ion-content>
    Cette avec une combinaison d'ions diapositive { overflow-y: auto } a fonctionné pour moi. Merci beaucoup!

    OriginalL'auteur Abhimanyu Kumar

  4. 0

    Vous pouvez utiliser flex-zone d'organiser les diapositives hauteur:

    .slider-slides {
   display: flex;
}

    N'oubliez pas de réinitialiser les diapositives de la hauteur et de toutes les diapositives aura le plus de la hauteur 🙂

    .slider-slide {
   height: auto;
}

    OriginalL'auteur luckakashi

  5. 0

    pour un plus les yeux de la mise en cache de conception:

    régler la hauteur de parent de la boîte à la hauteur désirée (exmp 300px)

    définir le img de débordement et de hauteur min pour couvrir toute la hauteur pour les images plus courte que 300px:

    .box img{
    overflow: hidden;
    min-height: 300px;

}
.slider-slides{
    height:300px;
}

    OriginalL'auteur Homa Pourmohammadi

  6. 0
    <ion-slides [ngStyle]="{ 'height': slidesMoving ? 'auto' : (slidesHeight + 'px') }"
            (ionSlideDidChange)="slideDidChange()"
            (ionSlideWillChange)="slideWillChange()">
</ion-slides>

//index.ts
slideDidChange () {
 setTimeout( () => { this.updateSliderHeight(); }, 200); 
}
slideWillChange () {
  this.slidesMoving = true;
}
  updateSliderHeight(){
    this.slidesMoving = false;
    let slideIndex : number = this.SwipedTabsSlider.getActiveIndex();
    let currentSlide : Element = this.SwipedTabsSlider._slides[slideIndex];
    this.slidesHeight = currentSlide.clientHeight;

    console.log('index slide',slideIndex )
    console.log('current slide',currentSlide )
    console.log('height of slide', this.slidesHeight);

  }

    //Délai d'attente pour charger dynamiquement des données. si votre contenu statique sauter délai

    OriginalL'auteur Mohamed Arshath

  7. -1
    $ionicScrollDelegate.resize(); did the trick

    vérifier cette pour codepen

    Cela ne fait pas travailler car il calcule la taille de la diapositive-box, (ce qui est le plus long toboggan) et de ne pas le glisser lui-même.

    OriginalL'auteur bCliks