How to combine ion-slides with ion-cards in Ionic4?

Question

Combining ion-slides with ion-cards completely messes up the ion-cards. Somehow the cards are not vertically aligned, once I wrap them in the ion-slide, but side by side.

I am creating an input form with different input questions in each card. Each Slide contains a new topic of the inputs.

I already tried to put the ion-cards back into an order by wrapping them in an ion-grid. That works a little bit better but is still not a pretty solution.

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>

Why is the ion-card layout effected by the ion-slide?

Hi MD Khali, this is a cool function! but it does not answer my question. Because I would like to stack three ion-cards within ONE ion-slide! However i found other use-cases for your function. Thanks alot! — felixtherabbit, Jul 24 '19 at 10:34

MohammedAli · Answer 1 · 2019-07-23T13:57:50.047

2

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',
    }
  }

edited Jul 23 '19 at 13:57

answered Jul 23 '19 at 13:32

MohammedAli

2,361
2
19
36

Hi MD Khali, thanks a lot! The advice to add css was already helping. However I want to stop 2-3 cards per ion-slide and not one card per slide. Do you have a clue how to do that? – felixtherabbit Jul 23 '19 at 13:54
i am edit my answer see in ts file one properties there 'slidesPerView', you can give no. of slide there – MohammedAli Jul 23 '19 at 13:59

How to combine ion-slides with ion-cards in Ionic4?

1 Answers1