Can't get components that where in Ionic slide to appear in swiper

Ionic Framework
1

Hi, I currently have a couple of (lazy loaded) views where I use the ionic slide.

eg I have

<ion-slides #slider pager='true' [options]='slideOpts'
     (ionSlideDidChange)='ionSlideDidChange()'>
    <ion-slide>
      <app-component1 #comp1>        
      </app-component1>
    </ion-slide>
    <ion-slide>
      <app-component2 #comp2>        
      </app-scomponent2>
    </ion-slide>
  </ion-slides>

Following these instructions, I have attempted to updated to using ‘swiper’.

I have a shared module I import into all my other lazy loaded, so I though perhaps this is where I would import, and export the SwiperModule,

I updated my component as follows…

<swiper #slider pager='true' [initialSlide]="initialSlide" showPagination="true">
    <ng-template swiperSlide>     
      <app-component1 #comp1>        
      </app-component1>
    </ng-template>
    <ng-template swiperSlide>    
      <app-component2 #comp2 >        
      </app-component2>
    </ng-template>
 </swiper>

And in the component itself, I have

import SwiperCore, { Navigation, Pagination, Scrollbar, A11y, Swiper } from 'swiper';
SwiperCore.use([Pagination, Scrollbar]);

Looking in devtools, I can see my components there, but I have two problems

  1. I don’t see the “pager dots” as in the Ionic slider…
    Here is what I use to have with the Ionic slide…

image
image430×687 18.7 KB

I also have the following in global.scss

@import '~swiper/scss';
@import '~@ionic/angular/css/ionic-swiper';
@import '~swiper/scss/pagination';

Am I missing something to make these “pager dots” show?

I the component code, i have the following

@ViewChild('slider', { static: true }) private slider: Swiper;
@ViewChild('comp1', { static: true }) private comp1: MyComp1;
@ViewChild('comp2', { static: true }) private comp2: MyComp2;

I get the reference to the Swiper, but both the components are now always not set.

Can I still get references to these somehow ?

Thanks in advance for any help!

2

Ok, I have found my problems above.

  1. for the component references, I just need to make these NOT static, and then they are available in ionViewDidEnter

  2. For the paging, I set inside the the config object…

public config: SwiperOptions = {
    pagination: true,    
  };

...
<swiper #swiper [config]="config"

And I then get the paging dots.

So all appears to work fine