Ionic-framework: Bug: "ion-slides" - fast rerendering causes a crash

[Erbolking]

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

If you try to rerender "ion-slides" within 300ms, it will crash with following error:

TypeError: Cannot read property 'removeAttribute' of undefined
    at cleanupStyles

Expected behavior:
It shouldn't

Steps to reproduce:
Please open http://plnkr.co/edit/kjAe0c?p=preview

Ionic info:

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.9.0 
ios-sim version: 5.0.13 
OS: OS X El Capitan
Node Version: v6.9.3
Xcode version: Xcode 8.2.1 Build version 8C1002

[brandyscarney]

I confirmed this is an issue on latest (2.3.0). It looks like the error is coming from here: https://github.com/driftyco/ionic/blob/master/src/components/slides/swiper/swiper.ts#L896

[Erbolking]

@brandyscarney yep, looks like it tries to remove a style from removed container.

[jgw96]

Hello, I am going to close this issue as a duplicate of https://github.com/driftyco/ionic/issues/10271. Thanks!

[Anujmoglix]

Can anyone give full fixed code ?

[sosmed1945]

Maybe this is bad way but it's work for me

import { Slides } from 'ionic-angular';

@ViewChild(Slides) slides: Slides;

ngAfterViewInit() {
this.slides.autoplayDisableOnInteraction = false;
this.slides.spaceBetween = 30; 
}

loadSlider() {
    this.sliderProvider.getAllSlider().subscribe(data => {
      this.slideNya = data
      var paras = document.getElementsByClassName('slideTipuan');
      while(paras[0]) {
          paras[0].parentNode.removeChild(paras[0]);
      }​
    }, (error) => {
    });
  }

<ion-slides autoplay="2000" loop="true" speed="1000" pager="true">
  <ion-slide *ngFor="let data of slideNya">
    <img src="{{data.picture}}" alt="Banner">
  </ion-slide>
  <ion-slide class="slideTipuan">
  </ion-slide>
</ion-slides>

[sayanbrainium]

I have the solution:
Do like this

<ion-slides *ngIf="slideData && slideData.length" autoplay="5000" class="slideroption" pager="true"   loop="true" speed="300">
      <ion-slide   *ngFor="let slide of slideData">
                <img src="{{slide.image}}" />
          </ion-slide>
    </ion-slides>

[3cees]

This worked for me:

I wait until the nav buttons appear. Then it works:

if (selected_bg) { selected_bg = parseInt(selected_bg); let scope = this; let int = setInterval(function () { let btn = document.querySelectorAll('[data-slide-index="0"]');//nav 'bullets' if (btn.length > 0) { clearInterval(int); scope.slides.slideTo(selected_bg, 500); } }, 1); }

[ShilpaPrajapati1992]

@sayanbrainium :Didn't worked for me

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.