Slides - unable to pan zoomed in slides

[themastersoda]

Ionic version: [ ] 1.x [X] 2.x

I'm submitting a ... [X] bug report [ ] feature request [ ] support request

Current behavior: Zoomed slides cannot be panned currently.

Expected behavior: User should be able to move zoomed in slide to look around it.

Steps to reproduce:

    <ion-slides #slider [zoom]="true">
        <ion-slide *ngFor="let item of items">
            <div #imageParent class="swiper-zoom-container">
                <img #image [src]="item">
            </div>
        </ion-slide>
    </ion-slides>

Double tap the slide to zoom it in, then try moving your finger. As you move the finger, zoomed image should follow it, allowing to see parts that are outside of the view.

Other information:

I have found the problem to be inside the slides component andcreated a pull request with a fix for it #10964

Ionic info::

Cordova CLI: 6.5.0
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.3.0
Ionic App Scripts Version: 1.2.2
ios-deploy version: 1.9.0
ios-sim version: 5.0.13
OS: OS X El Capitan
Node Version: v6.9.1
Xcode version: Xcode 8.2.1 Build version 8C1002

[jgw96]

Thanks for opening an issue with us, we will look into this!

[themastersoda]

Any news on this issue? Linked pull request solves mentioned issues and as far as we tested it, doesn't seem to create any new ones.

Currently, there is no way to move zoomed in images inside slider without switching to the next slide. This is a major limitation for users that want to get a closer look at images inside slider. I believe lots of people would really appreciate having the ability to fully utilize zoom functionality.

[matheusbaumgart]

Definitely would appreciate if the PR was merged and the problem solved. The documentation https://ionicframework.com/docs/api/components/slides/Slides/#input-properties mentions zoom but it doesn't work :/ @jgw96 please look into this.

[alaa-alshamy]

same here :(

and i think zoom should work without we add parent div to the image with class "swiper-zoom-container"

@jgw96 please look at this , it's very important feature

[StefanRein]

I have 40 slides with images with a size about 1024x1300 and ~600kb each.

After I saw that I can use the zoom functionality if I just add the classname to a wrapper container from slides/swiper/swiper-utils => CLS.zoomContainer => swiper-zoom-container

But after starting the app and going to the page with the slider I get a: Out of memory exception. Funny thing is, I am just showing one image at a time.. the other ones are not in the DOM (*ngIf) and have no string for the src property.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. 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.

Thank you for using Ionic!