ionic-framework: Slides not work after upgrade RC4 to RC5

Ionic version: (check one with “x”) [ Lastest nightly] 2.x

I’m submitting a … (check one with “x”) [ ] bug report

Current behavior:

After upgrading from RC4 to RC5 image slider not work. array and images loaded from web service and just show the first image, after slide the bullet move to second but blank image (white) show and can’t not move slide again to left or right (slider crashed).

This error showed in console:

TypeError: ele.hasAttribute is not a function

I’m use RTL layout.

Expected behavior: Slide image to left and right with RTL layout before RC8 release.

Code

<ion-slides *ngIf="offer?.images?.length" pager padding-top>
    <ion-slide *ngFor="let image of offer.images">
        <img [src]="image.small" class="slide-image" (click)="viewImage(image.large)" />
    </ion-slide>
</ion-slides>

Steps to reproduce: Loading images of slider from service and just show the first item and after slide to left for second one not work and crash slider over there with white blank page.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 17 (4 by maintainers)

Most upvoted comments

@jafaripur Hello,

Here’s a solution I tried and worked. It turns out that you that there’s a _rtl property which is private and not exposed in the Slides API. When set to true, everything works fine. The problem is I’m not able to update this property on ionViewDidLoad or ngAfterViewInit. It only works if you explicitly set it true by clicking a button.

import { Component, ViewChild } from '@angular/core';
import { NavController, NavParams , ViewController, Slides} from 'ionic-angular';
import { StartPage } from '../start/start';


@Component({
  selector: 'page-tutorial',
  templateUrl: 'tutorial.html'
})
export class TutorialPage {
  @ViewChild(Slides) slides: Slides;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  
  }

 startApp() {
    this.navCtrl.push(StartPage);
  }

  ngAfterViewInit() {
    this.slides.freeMode = true;
  }

//TRY calling this function on a button click/tap. IT WORKS !
  fixrtl(){
      this.slides_rtl = true
  }

// Doesn't work here !
  ionViewDidLoad() {
      this.slides_rtl = true
  }

}

@brandyscarney @jafaripur If you find a way to set/modify the _rtl property on Load, let me know.

abehairy on Jan 26, 2017

@peterpeterparker Before i test this, but not work.

jafaripur on Jan 25, 2017

Hi, I got same issue:

$ ionic info

Your system information:

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-rc.5
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v6.5.0
Xcode version: Not installed

Problem occurs even using the example from docs and what is more interesting happens also on RC4 with app-scripts: "1.0.0"

mosinski on Jan 16, 2017