OpenSeaDragon prevents swiping when combined with Swiper

We’re using OSD with SwiperJS to show a gallery of product images in our online shop.

We noticed that it’s not possible to swipe through the gallery with gestures, even when OSD is fully zoomed out (see video):

https://youtu.be/UhA3qAxTHbU

How can we combine swiping through a gallery with pan zooming from OSD?

I’m aware of the fact that swiping while zoomed in doesn’t make much sense but when the image is fully zoomed out, it would be great if the user could swipe left/right through the gallery.

We init OSD with the following options:

viewers[index] = new OpenSeadragon({
    id: 'viewer-container-' + index,
    showHomeControl: false,
    showFullPageControl: false,
    navigatorSizeRatio: 0.25,
    wrapHorizontal: false,
    alwaysBlend: false,
    constrainDuringPan: true,
    visibilityRatio: 1.0,
    minZoomLevel: 1,
    maxZoomLevel: 4,
    prefixUrl: "/",
    zoomInButton: 'hse-zoom-in',
    zoomOutButton: 'hse-zoom-out',
    tileSources: img.zoomSrc,
    immediateRender: true
});

[valnub]

@iangilman Thanks a lot for your effort! I’ll dig into this and see if it works.

[iangilman]

Cool. One thing I forgot to mention: of course OSD’s multi-image will handle lazy-loading for you; no tiles are loaded until the image is panned onto the screen. That said, if you’re using DZI or IIIF files, it does load the initial XML or JSON data for all of the images at once. There are ways to get around this if you need.

As for tracking (I assume you mean analytics), you’d have to watch the pan events and detect which image is shown and fire the appropriate analytics beacon as needed.