web-dev-qa-db-ja.com

スライドの高さが異なるイオンスライドボックス

ion-slide-boxを使用していますが、問題は、ion-slideが同じ高さにないため、すべてのion-slideを高さ1のサイズに設定することです。以下は例です

  • イオンスライド1高さ30px
  • イオンスライド2高さ100px

したがって、ion-slide-boxの高さは100pxになり、slide1に空白（70px）が作成されます。また、ユーザーがその空白スペース（70px）を使用してスライドすると、sliderは機能しません。

さまざまなスライドの高さでslideboxを機能させる方法/回避策は何でしょうか？

javascriptionic-frameworkslide
10
sameera207

あなたはこれを使うことができます：

.slider-slides{
  display: flex;
  flex-direction: row;
}
5
Mao

すべてのスライドが空白を残さずにスライダーの高さを埋める固定高さのスライダーが必要な場合は、style.cssに次の行を追加します。

.slider {
height: 200px; /* slider height you want */
}
.slider-slide {
 color: #000;
 background-color: #fff;
 height: 100%;
}
3
Mithun ck

強いテキスト ionic 2を使用している場合は、scssを追加します。

 .slide-zoom {
  height: 100%;
  }

このクラスをにインポートします

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

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


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


     </ion-content>
1
Abhimanyu Kumar
$ionicScrollDelegate.resize(); did the trick

チェック this codepen

0
bCliks

より目を引くデザインの場合：

親ボックスの高さを希望の高さに設定します（例：300px）

300pxより短い画像のすべての高さをカバーするようにimgオーバーフローと最小高さを設定します。

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

}
.slider-slides{
    height:300px;
}
0
Homa Pourmohammadi

フレックスボックスを使用して、スライドの高さを整理できます。

.slider-slides {
   display: flex;
}

スライドの高さをリセットすることを忘れないでください。すべてのスライドが最大の高さになります:)

.slider-slide {
   height: auto;
}
0
luckakashi
<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);

  }

//データを動的にロードするためのタイムアウト。コンテンツの静的スキップタイムアウトの場合

0
Mohamed Arshath