ionic 4 - ion-slides component not working

Question

I'm trying to use ion-slides inside a modal.

Tried different many ways but it's always free draggable stopping at any position.

It look like the component didn't setup.

My HTML

<ion-content>
<div class="page_content">

  <ion-slides #slides [pager]="true" [options]="slideOpts">

    <ion-slide class="slide_scan">slide1</ion-slide>
    <ion-slide class="slide_info">slide2</ion-slide>
    <ion-slide class="result">slide3</ion-slide>

  </ion-slides>
</div>
</ion-content>

My TS

...
import { IonSlides } from '@ionic/angular';
...

export class ModalPayPage implements OnInit {

  // @ViewChild('slides') slides: IonSlides;
  // @ViewChild('slides', {static: true}) slides: IonSlides;
  @ViewChild('slides', { read: true, static: false }) ionSlides: IonSlides;

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

  constructor(
    private modalController:ModalController,
    public alertController: AlertController,
    public platform: Platform,
    ) { }

  ...

}

Am I doing something wrong?

just found this is an open bug in ionic: https://github.com/ionic-team/ionic/issues/17522 -- temporary solution inside — anderlaini, Jan 02 '20 at 23:52
can you share your css? i think i had same issue and there is a fix and explanation for it based on css — Sergey Rudenko, Jan 03 '20 at 06:38
can you add your code here and show how to reproduce the problem you have? https://stackblitz.com/edit/ionic-v4-angular-tabs-cxofqh — Sergey Rudenko, Jan 03 '20 at 07:17

score 0 · Answer 1 · answered Jan 03 '20 at 04:25

I Have recently implmented Ion-slides in a project.I will post my code here, Hope this help you.

 <ion-slides pager="false" slidesPerView="1" shouldLockSwipes="1">
            <ion-slide *ngFor="let promocode of promocodedata">
                <ion-card  >
                    <ion-card-header>
                        {{promocode.code}}
                    </ion-card-header>
                    <ion-card-content>
                    Upto <br>
                    <p>{{promocode.rate}}% Off</p>
                    <p style="font-size: 9px;">{{promocode.description}}</p>
                    </ion-card-content>
                  </ion-card>
            </ion-slide>

         </ion-slides>

This is my .Scss file content to adjust the style

.home_promo_code{
        margin-top:20px;
        .card{
            border-radius: 0px;
            width: calc(100% - 5px);
            margin-bottom: 10px;
            // background-image: url("../../assets/imgs/promo.png") !important;
            background-position: center;
            background-size: cover;
            height: 150px;
            // background-color: rgba(0, 0, 0, 0.40);
            background-image: linear-gradient(to right, #28328c, #4f5cd5);
            box-shadow: none !important;

            .card-header{
                color: #fff;
                padding-bottom: 0px;
                font-size: 14px;
                font-weight: 100;
                padding-bottom: 10px;
                text-align: center;
            }
            .card-content{
                color: #fff;
                text-align: center;
                p{
                    color: #fff;
                    font-size: 18px;
                    font-weight: 250;
                }

            }
        }
    }

ionic 4 - ion-slides component not working

1 Answers1