Virtual Slide Performance is reduced with large dynamic data set in Ionic Android Platform

[vimalkumar015]

I am using Swiper js with ionic-angular + Capacitor js mobile app. In some scenario my app need to show more than 6000 slides. which slides data will be fetched dynamically. I use Virtual module to show slides.

In ios and web there is no performance lag. But in Android after 6000 slides loaded app is getting laggy and gets crashed.

HTML:

    <swiper id="StkSlider" #StkSlider [config]="VerSlideOpts" (slideChange)="stockSetClock($event)" [virtual]="true">

      <ng-template swiperSlide *ngFor="let item of copySrcData; index as i">

        <div class="swiper-slide-wrapper">
          <p class="StkName">{{name}}</p>
          <p class="StkTicker">({{item.ticker}})</p>
          <p class="StkScore" [ngStyle]="{'color': getmedcolor(item.score)}">{{item.val.toFixed(1)}}</p>
          <div class="StkPriceWrapper" *ngIf="price">
            <p class="StkPriceLabel">Stock Price</p>
            <p class="StkPrice">{{item.currency}} {{item.price.toFixed(1)}}</p>
          </div>
          <div class="StkWeightWrapper" *ngIf="price">
            <p class="StkWeightLabel">Weight</p>
            <p class="StkWeight">{{weight}}%</p>
          </div>
        </div>

      </ng-template>

    </swiper>

swiper config:

 VerSlideOpts: SwiperOptions = {
slidesPerView: 1,
direction: 'vertical',
loop: false,
observeParents: true,
observer: true,
observeSlideChildren: true,
followFinger: false,
allowTouchMove: false,
passiveListeners: true,
slideToClickedSlide: true,
init: true

}

angular Demo Ionic Demo

Need better solution ASAP to over come this challenge. Any Advice would be very helpful.

Originally posted by @vimalkumar015 in https://github.com/nolimits4web/swiper/discussions/5445

[github-actions[bot]]

Hello @vimalkumar015. Please provide a online reproduction by codesandbox or a minimal GitHub repository. You can fork one of our demos in codesandbox to get start. Issues labeled by missing demo will be closed if no activities in 3 days.

[vimalkumar015]

angular Demo Ionic Demo

[aftabkhalid]

Core also has the same problem. You can check the default swiper demo. When you drag a little quickly it will not work or it jumps to slide one.

https://codesandbox.io/s/d4vlk?file=/index.html

Facing the problem after the new release...

[aftabkhalid]

The swiper is not working with longSwipes: false,

[GRDtechlab]

angular Demo Ionic Demo

@vimalkumar015 Can You please see why in stackblitz I am getting error Can't find package:swiper_angular here is demo in stackbliz link. Thanks!

https://stackblitz.com/edit/angular-ivy-gqpzhp?file=src%2Fapp%2Fapp.module.ts

[vimalkumar015]

angular Demo Ionic Demo

@vimalkumar015 Can You please see why in stackblitz I am getting error Can't find package:swiper_angular here is demo in stackbliz link. Thanks!

https://stackblitz.com/edit/angular-ivy-gqpzhp?file=src%2Fapp%2Fapp.module.ts

@GRDtechlab i checked your demo. it seems stackbltiz works only upto [email protected] version.

Solution:

1. in stack blitz package name add [email protected] instead of swiper.
2. remove import 'swiper/angular'; from app.module.ts
3. in style.css just add @import "~swiper/swiper-bundle";

[vimalkumar015]

Hello everyone and @nolimits4web , In order to resolve this issue, i tried to dug little deeper. I think this will be the cause of the problem.

Even though slider [virtual]:true and element only showing 2/3 available elements, because of angular *ngfor, n number of ng-template has been getting created and memory also getting allocated for it.

in the above image i have created 7000 slides with swiperjs. you can see memory holds 7015 TemplateRef (including tabs and other pages).

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[nolimits4web]

New Swiper v9 doesn't have Angular components anymore, it is recommended to use new Swiper Web Components instead.