Slides crashes if you have more than 20 slides

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: but I think it hasn’t been updated, because what I get is an error, you can see the error here:

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';

  moduleId: "",
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [CategoriesService]

export class HomePage {

  //Categories preload
  categoriesPage: any = CategoriesPage;

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

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

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


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

    moduleId: "",
    selector: "slides",
    templateUrl: "./slides.html",
    providers: [JokesService]

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

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

      //Current page
      page:number = 1;

      //Per pages
      per_page = 10;

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

      //Store index for pagination

      constructor(private jokesService: JokesService){
        //All jokes

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

          console.log('get the active index here');

I have managed to get this to work like this:

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

And in my component


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.

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

        this.active_index = Slides.getActiveIndex();


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

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: 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.


<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>


    this.currentSlide = Slides.getActiveIndex();

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:


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

  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++) {
        header: `Slide ${i}`,
        image: ''

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


      Ionic Blank

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

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

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.

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.

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.