如何在Ionic4中將離子幻燈片與離子卡結合在一起？

Question

將離子載玻片與離子卡組合在一起會完全弄亂離子卡。 一旦將卡包裹在離子滑片中並排放置，它們就不以某種方式垂直對齊。

我正在創建一個輸入表單，每張卡中都有不同的輸入問題。 每張幻燈片都包含一個新的輸入主題。

我已經嘗試過將離子卡包裝在離子網格中，以重新整理離子卡。 效果更好一些，但仍然不是一個很好的解決方案。

HTML：

<ion-content>
  <div>
    <ion-slides>
      <!-- Slide 1 -->
      <ion-slide>
        <ion-card>
          <ion-card-header>
            <ion-card-subtitle>Food?</ion-card-subtitle>
          </ion-card-header>
          <ion-card-content>
            <ion-list>
              <ion-radio-group>
                <ion-item>
                  <ion-label text-wrap>Pizza</ion-label>
                  <ion-radio slot="start" ></ion-radio>
                </ion-item>
                <ion-item>
                  <ion-label text-wrap>Noodle</ion-label>
                  <ion-radio slot="start" ></ion-radio>
                </ion-item>
                <ion-item>
                  <ion-label text-wrap>Soup</ion-label>
                  <ion-radio slot="start" ></ion-radio>
                </ion-item>
                <ion-item>
                  <ion-label text-wrap>Salad</ion-label>
                  <ion-radio slot="start" ></ion-radio>
                </ion-item>
              </ion-radio-group>
            </ion-list>
          </ion-card-content>
        </ion-card>
        <ion-card>
          <ion-card-header>
            <ion-card-subtitle>Drinks?</ion-card-subtitle>
          </ion-card-header>
          <ion-card-content>
            <ion-list>
              <ion-radio-group>
                <ion-item>
                  <ion-label text-wrap>Water</ion-label>
                  <ion-radio slot="start" ></ion-radio>
                </ion-item>
                <ion-item>
                  <ion-label text-wrap>Juice</ion-label>
                  <ion-radio slot="start" ></ion-radio>
                </ion-item>
                <ion-item>
                  <ion-label text-wrap>Beer</ion-label>
                  <ion-radio slot="start" ></ion-radio>
                </ion-item>
              </ion-radio-group>
            </ion-list>
          </ion-card-content>
        </ion-card>
      </ion-slide>
      <!-- Slide 2 -->
      <ion-slide>
        Some content..
      </ion-slide>
    </ion-slides>
    <ion-button (click)="prevSlide()">Back</ion-button>
    <ion-button (click)="nextSlide()">Next</ion-button>
  </div>
</ion-content>

為什么離子卡布局會受到離子滑動的影響？

Answer 1

html.file

<ion-slides [options]="slideOpt">
      <ion-slide>
        <ion-card >
          <!-- Conten -->
        </ion-card>
      </ion-slide>
      <ion-slide>
        <ion-card>
          <!-- Content -->
        </ion-card>
      </ion-slide>
      <ion-slide>
        Some content..
      </ion-slide>
    </ion-slides>

ts.file

slideOpt ={
    direction: 'vertical',
    slidesPerView: 2,
    pagination: {
      el: '.swiper-pagination',
    }
  }