Zooming with Bootstrap carousel about zooming HOT 3 CLOSED

Well...this is a known issue/limitation of this library mentioned in README as #22. Basically, images will not be visible after zoom-in if its parents have CSS style overflow: hidden. In your case, the element .carousel-inner is causing the issue.

A potential solution is to remove overflow: hidden before opening the image and add it back once closed:

const carouselInner = document.querySelector('.carousel-inner')

new Zooming({
  onBeforeOpen: function () {
    carouselInner.style.overflow = 'visible'
  },
  onClose: function () {
    carouselInner.style.overflow = 'hidden'
  }
});

I haven't tested it though, just something off the top of my head.

from zooming.

Thanks for the quick reply! I have done a static override to overflow: visible on the .carousel-inner element, however it doesn't make a difference, I also updated the codepen.

...
<div class="carousel-inner" style="overflow: visible;">
   ...
</div>
...

from zooming.

Hey @winterdedavid I don't think I have bandwidth to investigate this further, so I will close this issue now. As I said it might be a limitation of this library. As a side note, it may not be a good UX choice to combine image zooming and carousel together, seems a bit weird to interact in my opinion.

from zooming.