Ionic slide with full width

Ionic Framework Ionic Angular
1

HI im want to use ion-slide combine with ion-list with full width, but when i try it it will be look like this :
Screenshot (1247)

but when i see it in doc ion-slide and ion-list can be like this :
Screenshot (1248)

heres my code HTML

 <ion-card-content class="ion-no-padding">
            <ion-grid fixed class="ion-no-padding">
              <ion-row>
                <ion-col size="12">
                  <ion-slides [options]="slideOpts" (ionSlideDidChange)="slideDidChange(slides)">
                    <ion-slide class="ion-no-padding ion-no-margin">
                      <ion-list>
                        <ion-item>
                          <ion-label>Mega Man X</ion-label>
                          <ion-label class="ion-text-end">20%</ion-label>
                        </ion-item>
                        <ion-item>
                          <ion-label>The Legend of Zelda</ion-label>
                        </ion-item>
                        <ion-item>
                          <ion-label>Pac-Man</ion-label>
                        </ion-item>
                        <ion-item>
                          <ion-label>Super Mario World</ion-label>
                        </ion-item>
                      </ion-list>
                    </ion-slide>
                    <ion-slide>
                      <h1>Slide 2</h1>
                    </ion-slide>
                  </ion-slides>
                </ion-col>
              </ion-row>
            </ion-grid>
          </ion-card-content>

and this form ts

  slideOpts = {
    initialSlide: 0,
    speed: 400,
    pagination: false
  };

am i missing something or there is alternative way ?, thank you in advance.

2

problem solved, i’m update it with swiper, thank you