Slides crashes if you have more than 20 slides

Ionic Framework ionic-v3
1

So I have a home.ts and a slide-jokes.ts, and an event attached to <ion-slides (ionSlideDidChange)="slideChanged()"> and I want to get the current index and I’ve looked at the doc here: https://ionicframework.com/docs/v2/api/components/slides/Slides/ but I think it hasn’t been updated, because what I get is an error, you can see the error here: https://screencast.com/t/wRipUbS0QeD

I’m new to ionic and angular

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { CategoriesPage } from '../categories/categories';
import { CategoriesService } from '../categories/categories.service';

import {SlideJokes} from './slide-jokes';

@Component({
  moduleId: "module.id",
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [CategoriesService]
})

export class HomePage {

  //Categories preload
  categories;
  categoriesPage: any = CategoriesPage;

  constructor(public navCtrl: NavController, private categoriesService : CategoriesService) {

    //Categories
    categoriesService.getCategories().then(response => this.categories = response.json()).catch(response => this.categories = false);
    
  }

  /**
   * Go to categories page, send categories data
   */
  goToCategories(){
    this.navCtrl.push(CategoriesPage,{categories: this.categories});
  }

}

import { ViewChild } from '@angular/core';
import { Component } from '@angular/core';
import {JokesService} from "../../services/jokes.service";

@Component({
    moduleId: "module.id",
    selector: "slides",
    templateUrl: "./slides.html",
    providers: [JokesService]
})

    export class SlideJokes{
      @ViewChild(Slides) slides: Slides;

      //Store jokes
      jokes = [];
      
      //Store slides
      //slides;

      //Current page
      page:number = 1;

      //Per pages
      per_page = 10;

      //Total pages count from API
      total_pages:number = 0;

      //Store index for pagination
      active_index:number;

      constructor(private jokesService: JokesService){
        //All jokes
        this.getJokes();
      }

      getJokes(){
        this.jokesService.getJokesByCategory(0,this.per_page,this.page).then(response => {this.jokes.push(...response.json().data); this.total_pages = response.json().infos.total_pages;}).catch(response => this.jokes = [[false]]);
      }

      slideChanged(){
          console.log('get the active index here');
      }
    }
2

I have managed to get this to work like this:

<ion-slides #Slides (ionSlideDidChange)="slideChanged(Slides)">

And in my component

  slideChanged(Slides){
  console.log(Slides.getActiveIndex());
 }

Is this the wrong way to do it? I’ve also tested on device iPhone 6 plus and works fine.

Now I get this on xcode:
Message from debugger: Terminated due to memory issue

Can this be a problem because I assign to much data to the jokes array? or is it because of <ion-slides #Slides (ionSlideDidChange)="slideChanged(Slides)">

I just tested using 100 items per request, and it crashed, so I assume that I need to keep the paging as small as possible.

  slideChanged(Slides){
    
    if(Slides.getActiveIndex() % 5 == 0 && this.active_index != Slides.getActiveIndex()){
      
      if((this.page + 1) < this.total_pages){
        this.page = this.page + 1;
        this.getJokes();

        this.active_index = Slides.getActiveIndex();
      }

    }
  }

I’m adding another 10 slides every 5 slides that the user slides through

3

I know this is a long post, but after solving all of this, now I have the problem of slides crashing b/c of too much elements and it can’t handle it.

I did some research and found a solution for ionic 1, here: http://codepen.io/mhartington/pen/kFhAp?editors=101 did anyone has a solution for ionic2?

Ok so I tested this solution on the device:
<div *ngIf="i >= (currentSlide-1) && i <= (currentSlide+1)">

and it worked it didn’t crash.

Detail:

<ion-slides #Slides  (ionSlideDidChange)="slideChanged(Slides)">
    <ion-slide class="bg-grey" *ngFor="let joke of jokes; let i = index">
        <div *ngIf="i >= (currentSlide-1) && i <= (currentSlide+1)">
            <div padding>

And

  slideChanged(Slides){
    this.currentSlide = Slides.getActiveIndex();
  }
4

Let’s go back to your original issue. You can’t use something if you don’t import it, the error message was telling you there was nothing named slides. If you’re new to jabascript / typescript modules you wouldn’t know that though, and the line is missing in the docs. Your .then blocks are all on one line and hard to read, and I can’t see your services or all your html idk for sure what your issue is regarding the memory error, but I had no such issues.

I just threw together a real simple demo and it worked just fine in the simulator:

home.ts

import { Component, ViewChild } from '@angular/core';
import { NavController, Slides } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  @ViewChild(Slides) slides: Slides;

  jokes = [];

  constructor(public navCtrl: NavController) {
    for (let i = 0; i <= 100; i++) {
      this.jokes.push({
        header: `Slide ${i}`,
        image: 'https://ionicframework.com/docs/v2/demos/src/slides/slide1.jpeg'
      })
    }
  }

  slideChanged() {
    let currentIndex = this.slides.getActiveIndex();
    console.log("Current index is", currentIndex);
  }
}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-slides (ionSlideDidChange)="slideChanged()">
    <ion-slide *ngFor="let joke of jokes">
      <h1>{{joke.header}}</h1>
      <img src="{{joke.image}}">
    </ion-slide>
  </ion-slides>
</ion-content>
5

I had on each slide, after changing that with ion-scroll and enabled prod mode, runs smooth on device. Thank you!

6

Hello, could you please take look at this plunker, it looks like ion-slides fails to trigger the ionSlideDidChange() event the moment I switch to another tab. I would like the slide show to continue playing while I browse to other tabs in the application. I consider this to be a bug, unless I missing something.

Thank you.

7

I looked at it but I don’t quite understand it. I’m not sure why you would expect the slideshow to keep playing once you navigate away. Once you leave a page it’s not going to continue doing anything.

8

Some background info

I switch tabs with navcontroller .select(), thus I don’t push/pop navigation in hope to keep players tab alive.

I would like to be able to keep my slides playback playing while I browse other media. Also because I have sound, a postpause, etc… associated with a slide playback, and my current logic is based on this event everything stops (audio, etc…).

I could see the argument about ion-slides not being visible, which would mean I would have to make my own events and restore the correct slide when the tab’s particular player content becomes visible.
However, I find that awkward, especially that other players will continue playing like I am using npm package plyr to play videos in the same tab.
I have not tried to use directly slider.js to see if this is an ionic2 implementation-introduced new behavior.

Thank you for taking a look.