Slides not work after upgrade RC4 to RC5

[jafaripur]

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.

[basvdijk]

The release notes stated some API changes for the slides. Did you check these out? http://ionicframework.com/docs/v2/api/components/slides/Slides/

[jafaripur]

@basvdijk Yes, check my code. I changed the code based on release changes.

[basvdijk]

OK! I don't know anymore possible issues. Sorry.

[mosinski]

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"

[brandyscarney]

@mosinski If you downgrade app-scripts does it work for you?

[jafaripur]

@brandyscarney with downgrade to "@ionic/app-scripts": "0.0.47" again not work!

[leongzw]

it's actually all about the data you prepared to loop the slides offer.images . Try to change it to static data and you will see that the slider is working perfectly fine. So i doubt any fixing on the asynchronous data issue? There is a duplicated issue out there if not wrong

[jafaripur]

@leongzw No all data is correct. After upgrading to RC5 this bug appeared.

[leongzw]

@jafaripur There're quite a number of discussion about async data that causes the error ele.hasAttribute is not a function. Btw, I found that there is a "pager" input properties inside your ion-slides. is that a css class or you want the slide to has pager property? If so, try to put a value to it to get rid of the error.

<ion-slides *ngIf="offer?.images?.length" pager="true" 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>

[jafaripur]

@leongzw I used this condition before and test with it, But this is not related to this issue. Images loaded by error in sliding. After RC4 and refactoring the slides this error appeared!

[peterpeterparker]

@jafaripur could you maybe try to remove "pager" attribute from your "ion-slides"? do that help?

if yes, try then to add again the attribute but with his boolean value "pager=true"

not sure about it, just an idea...

[jafaripur]

@peterpeterparker Before i test this, but not work.

[peterpeterparker]

@jafaripur gonna double check later again, but I use following code with RC.5 and it seems to work for me :(

<ion-slides #mySlider pager="true" id="mySlider" *ngIf="itemImages != null">
      <ion-slide *ngFor="let photo of itemImages;">
            <img...
       </ion-slide>
  </ion-slides>

[abehairy]

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

[jafaripur]

@abehairy Currently i set dir="ltr" in slides directive and now work.

[AhmadAmri]

I had the RTL swiping issue in slides when upgraded to the latest version today. The swiper checks the dir attribute or direction style for its parent - which is 'swiper-container' - to handle the rtl behavior.

To make it work by just adding dir="rtl" to ion-slides tag, just like the swiper; I modified the slides component to read the dir attribute from 'ion-slides' as input, set the internal _rtl and add the dir attribute to swiper container.

I'll apply the changes and create a pull request.

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