How do I add virtual slides to Swiper.js using ngx-swiper-wrapper

I have no problem with creating slides and using swiper with the ngx-swiper-wrapper library for Angular. I now realize I might have 300+ slides, so I want to utilize the virtual slide feature.

My first example is what I currently do to add regular slides. It works fine and I can add new slides as the user swipes forward, loading new slides until all members have been loaded. But I assume if 100+ members are loaded it might crash the DOM or use a large amount of memory, so I'd like to use swipers virtual slides feature.

Problem - Using the ngx-swiper-wrapper library, I can't figure out how to add virtual slides after the slide event "slideNextTransitionStart" because I can't access the virtual slides parameters from the component in my .ts file.

Here's what I currently do to add regular slides to my slider (works fine).

memberSwiperConfig: SwiperConfigInterface = {
  preloadImages: false,
  lazy: true,
  slidesPerView: 1,
  spaceBetween: 10,
  watchOverflow: true,
  navigation: true,
  grabCursor: true,
  breakpoints: {
    568: {
      slidesPerView: 2,
      spaceBetween: 10,
    },
    768: {
      slidesPerView: 2,
      spaceBetween: 10,
    },
    1024: {
      slidesPerView: 2,
      spaceBetween: 10,
    }
  }
};

ngOnInit(): void {
  this.service.getMembers(this.band.id, this.skipMembers, this.takeMembers).subscribe(members => {
    this.members = members;
  }, error => {
    console.log(error);
  });
}

slideNextTransitionStart() {
  if (this.skipMembers < this.band.members) {
    this.service.getMembers(this.band.id, this.skipMembers, this.takeMembers).subscribe(members => {
      this.members[this.skipMembers] = members[0];
      this.skipMembers += 1;
    }, error => {
      console.log(error);
    });
  }

}

<swiper [config]="memberSwiperConfig" [(index)]="memberIndex" (slideNextTransitionStart)="slideNextTransitionStart()">
  <app-member-card *ngFor="let member of members" class="router-link" [routerLink]="['/members', member.name]" [MemberCard]="member"></app-member-card>
</swiper>

Here is what I've tried to add virtual slides.

1. set a virtual property from this codepen example in the config section works but I don't want to add them here, I want to add some initially in ngOnInit() and then load more on next events.

memberSwiperConfig: SwiperConfigInterface = {
  virtual: {
    slides: (function() {
      var slides = [];
      for (var i = 0; i < 600; i += 1) {
        slides.push(
          '<img src="https://picsum.photos/600/600/?image=' +
            (i + 1) +
            '"/><p>' +
            (i + 1) +
            "</p>"
        );
      }
      return slides;
    })()
  }
  // everything else is the same from above
};

2. I try and access the component in ngOnInit to load slides into the virtual.slides property, but I see a red underline when accessing it from both the component and from the config property. FYI - If I put in a breakpoint on that line, leave out the slides property and break the debugger on that line, I can see the property while debugging, but I can't access the property to add/remove slides.

// get the swipercomponent
@ViewChild(SwiperComponent) swiperComponent: SwiperComponent;


// ngOnInit

ngOnInit() {
  // tried accessing the slides from both the component and config section
  // but both slides property show me a red underline saying slides doesn't exist
  this.swiperComponent.config.virtual.slides
  this.memberSwiperConfig.virtual.slides
  // this doesn't work
  this.swiperComponent.config.virtual?.slides;
  this.memberSwiperConfig.virtual?.slides
}

// also slides is a VirtualOption from the library?? so not sure how to access it here to add a virtual slide

UPDATE - I looked a little more through the documentation and saw that the 'virtual' property is either a bool (true) or an object with the VirtualOptions. It says if I set it to true it will enable it with default settings. Does this mean I can't set custom breakpoints and other properties like I'm using in the first example above? Because it looks like all my breakpoints were lost.

Ex. before I set virtual to true Ex. after I set virtual to true I loose my breakpoints with 'slidesPerView = 2'

from How do I add virtual slides to Swiper.js using ngx-swiper-wrapper