Ionic-framework: ion-slides with zoom input properties

[sidjoshi001]

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

I'm submitting a ... (check one with "x")
[X] bug report
[ ] feature request

Uncaught TypeError: Cannot read property 'getAttribute' of null
at toggleZoom (swiper-zoom.js:297)
at swiper-zoom.js:404

<ion-slides #mySlider pager loop zoom="true">
 <ion-slide *ngFor="let image of images;">
  <img src="{{ imagePath.main+image }}">
 </ion-slide>
</ion-slides>

[mhartington]

There was a similar issue open yesterday, that I was unable to reproduce the issue.

[sidjoshi001]

So, How can I set zoom..? @mhartington

I got the following error

Uncaught TypeError: Cannot read property 'getAttribute' of null
at toggleZoom (swiper-zoom.js:297)
at swiper-zoom.js:404

[vincentgigandet]

I have a similar issue.

<div id="topSlide">
    <ion-slides loop="true" autoplay="4000" speed="500" direction="horizontal">
      <ion-slide *ngFor="let promotion of promotions" (click)="pushDetailPage(promotion)">
         <img src={{promotion.slideImageUrl}}/>
      </ion-slide>
    </ion-slides>
  </div>

This produces error - "Cannot read property 'hasAttribute' of undefined"
My slider worked well before but produces this error after updating to RC.5

[brainworksideas]

I have similar issue when I add autoplay property

  <ion-slides loop="true" autoplay="3000">
    <ion-slide *ngFor="let s of imagen_carrusel">
      <h1>{{ s.activa }}</h1>
    </ion-slide>
  </ion-slides>

get same error "Cannot read property 'hasAttribute' of undefined"
otherwise I have no error but I have static slider

[mhartington]

Dynamic or static, I am unable to replicate this. If someone can push a demo to github, I can look at that.

This is what I've been using for testing, and there have been no errors with RC 5.

  <ion-slides autoplay="4000" speed="500" zoom="true">
    <ion-slide *ngFor="let i of slides">
      Slide {{i}}
    </ion-slide>
  </ion-slides>

[nickgal]

@mhartington I am getting this with your snippet pasted into the template for RC5 issues:
http://plnkr.co/edit/KIIlQHI3YRg3pFuraaiQ?p=preview

Uncaught TypeError: Cannot read property 'hasAttribute' of undefined
    at autoplay (swiper.ts:208)
    at startAutoplay (swiper.ts:251)
    at Object.initSwiper (swiper.ts:197)
    at Slides._initSlides (slides.ts:837)
    at eval (slides.ts:823)
    at SafeSubscriber.schedulerFn [as _next] (core.umd.js:5733)
    at SafeSubscriber.__tryOrUnsub (Subscriber.ts:238)
    at SafeSubscriber.next (Subscriber.ts:190)
    at Subscriber._next (Subscriber.ts:135)
    at Subscriber.next (Subscriber.ts:95)

Uncaught TypeError: Cannot read property 'hasAttribute' of undefined
    at autoplay (swiper.ts:208)
    at startAutoplay (swiper.ts:251)
    at Object.initSwiper (swiper.ts:197)
    at Slides._initSlides (slides.ts:837)
    at eval (slides.ts:861)

[mhartington]

You did not provide the slides with and ion-slide.

http://plnkr.co/edit/PKatjkmFKxJBRxVKrD83?p=info

[vincentgigandet]

I solved this issue by wrapping my image with div.

<ion-slides loop="true" autoplay="4000" speed="500" direction="horizontal">
  <ion-slide *ngFor="let promotion of promotions">
    <div><img src={{promotion.slideImageUrl}}/></div>
  </ion-slide>
</ion-slides>

[nickgal]

Whoops. Got a little too excited there.

Back to the original issue; There is an error when you double click or zoom an image inside the slides.

http://plnkr.co/edit/goAKvawKstccUghPgNmU?p=preview

Uncaught TypeError: Cannot read property 'getAttribute' of null
    at toggleZoom (swiper-zoom.ts:382)
    at eval (swiper-zoom.ts:514)
    at SafeSubscriber.schedulerFn [as _next] (core.umd.js:5733)
    at SafeSubscriber.__tryOrUnsub (Subscriber.ts:238)
    at SafeSubscriber.next (Subscriber.ts:190)
    at Subscriber._next (Subscriber.ts:135)
    at Subscriber.next (Subscriber.ts:95)
    at EventEmitter.Subject.next (Subject.ts:61)
    at EventEmitter.emit (core.umd.js:5713)
    at eval (swiper-events.ts:577)

[mhartington]

Ok, so this information would have been good to have from the start. You have to double tap the image.

[toni2ve]

I solved this issue by wrapping my image with div having a class "swiper-zoom-container".

<ion-slides #mySlider pager loop zoom="true">
 <ion-slide *ngFor="let image of images;">
  <div class="swiper-zoom-container"><img src="{{ imagePath.main+image }}"></div>
 </ion-slide>
</ion-slides>

[sidjoshi001]

@toni2ve Thanks, buddy... it's working now but in console, I am getting this

swiper-zoom.js:133 Unable to preventDefault inside passive event listener invocation.

[toni2ve]

I am also getting this issue: Unable to preventDefault inside passive event listener invocation.

I'll update you once i find a solution for it.

[bimal72]

@toni2ve
As per [https://github.com/driftyco/ionic/issues/10013]

passiveListeners
boolean true
Passive event listeners will be used by default where possible to improve scrolling performance on mobile devices. But if you need to use e.preventDefault and you have conflict with it, then you should disable this parameter

I am not sue how to disable in ionic2?

[rrubio]

I had the same issue when loading images dynamically from google. Fixed by removing "autoplay" and added length check eg:

<ion-slides *ngIf="imagesList.length > 1" class="contact-slides" pager="true" loop="false">

[didinj]

For autoplay attribute error, I fix by add ngIf to make sure if slides have more than 1 slide item.

<ion-slides autoplay="5000" loop="true" speed="3000" *ngIf="products.length > 1">
<ion-slide *ngFor="let prod of products">
<img src="{{prod.prodImage}}">
</ion-slide>
</ion-slides>
<ion-slides *ngIf="products.length < 2">
<ion-slide *ngFor="let prod of products">
<img src="{{prod.prodImage}}">
</ion-slide>
</ion-slides>

It works on Ionic 2 Final.

[alaa-alshamy]

@mhartington
the issue happen in ur plnkr just open ur plnkr and open the console and then duple tap the slider to zoom in , and the error will appear in console and zooming faild

http://plnkr.co/edit/PKatjkmFKxJBRxVKrD83?p=info

[LufoX11]

Still getting this issue. The <div class="swiper-zoom-container"> helped to avoid the "getAttribute" error, but after that appeared the "preventDefault" one. I need to be able to display a single image with zoom capabilities, but I'm tied to this component that (I think) is the only one that can do that. Any workaround in the meanwhile? Thanks.

[BoyardIsBack]

Still getting this issue too. Any workaround or fix ?

Thanks.

[erdemildiz]

@didinj Thanks dude. I added *ngIf="banners.length > 0" . Its work!

[cozzbie]

So it seems like this error only happens when you try to render ion-slides before having data for it AND decide to use ion-slides attributes. So as suggested above, if you know you are going to use ion-slides attributes, tie it with an *ngIf so that rendering only occurs when data is finally available for ion-slides to render its ion-sliders

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