Some bugs using Swiper with thumbnails and zoom functionality

[Riccardo-Andreatta]

This is a (multiple allowed):

• [x] bug

• [ ] enhancement

• [ ] feature-discussion (RFC)

• Swiper Version: 5.1.0

• Platform/Target and Browser Versions: macOS, Windows, any browser.

• Live Link or JSFiddle/Codepen or website with issue: https://codepen.io/riccardo-andreatta/pen/dyypOvG

What you did

In the example above there are many bug (follow the numbers on each of the following sections):

1. double click on the main gallery Swiper, the main image is then zoomed,
2. double click on the main gallery Swiper, the main image is then zoomed, try to swipe to the next image but without going to that image.

Expected Behaviour

1. when the main image is zoomed, I can pan the image,
2. when the main image is zoomed, if you try to swipe to the next image, the main image is zoomed out, and the icon is going back to the initial status.

Actual Behaviour

1. when the main image is zoomed, the pan functionality is not working,
2. when the main image is zoomed, if you try to swipe to the next image, the image is zoomed out, but the slide still have the class swiper-slide-zoomed that is causing the icon status still be the one that should zoom out the image.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Riccardo-Andreatta]

As expected, there is never an answer from @nolimits4web nor a support...

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Ferie]

This has became stale... where is the author? Where is the support?

[vltansky]

@Riccardo-Andreatta @Ferie looks like you implemented zoom without .swiper-zoom-container wrapper:

...
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="swiper-zoom-container"> <--- This div is missing in your demo
                <img src="path/to/image1.jpg">
            </div>
        </div>

see https://swiperjs.com/api/#zoom

take a look at this demo: https://codepen.io/vltansky/pen/bGwyGgG

[rob-myers]

when the main image is zoomed, if you try to swipe to the next image, the image is zoomed out, but the slide still have the class swiper-slide-zoomed that is causing the icon status still be the one that should zoom out the image.

This just hit me. I was trying to layer the zoomed image above a subsequent image:

.swiper-slide.swiper-slide-zoomed {
  z-index: 1;
}

But swiper-slide-zoomed is not removed when we un-zoom on-change-slide, which breaks this approach.

---

A simple fix:

onZoomChange={(_swiper, scale, _imgEl, slideEl) => {
  if (scale === 1) slideEl.classList.remove('swiper-slide-zoomed');
}}

[MRamonLeon]

I faced the same issue, still not solved 😢

[nolimits4web]

Issue is closed because of outdated/irrelevant/not actual/needed more information/inactivity.

If this issue is still actual and reproducible for latest version of Swiper, please create new issue and fill the issue template correctly:

• Clearly describe the issue including steps to reproduce when it is a bug.
• Make sure you fill in the earliest version that you know has the issue.
• Provide live link or JSFiddle/Codepen or website with issue

[Riccardo-Andreatta]

@vltansky if I use your solution the image become no more full screen (cover) but it gets the dimension of the container.

And btw, this issue seems not yet solved... but they have closed it anyway... 🤦

[adamsnows]

Having the same problem with zoom here :(