I've been scouring the internet for answers to my unique issue with a Bootstrap 5 carousel. My setup is fairly basic, but I've removed the buttons and rely solely on swiping to navigate through the carousel items.
When I swipe left to right, everything works as expected. However, once I make the content inside the carousel vertically scrollable using CSS overflow-y set to either auto or scroll, it seems that the inner element is handling the pointer events and not passing them to the parent elements. I can't seem to find a way to force the events to propagate.
Is there something I'm overlooking? How can I make sure that the carousel-inner (or the carousel in general) continues to process swipe events even with child elements set to overflow-y?
Here's the structure of the HTML:
<div class="container pt-3 px-4">
<div class="row">
<div id="carouselMembers" class="carousel slide" data-controller="pool-carousel">
<div class="carousel-inner" data-pool-carousel-target="carouselInner">
<div class="pool-carousel-inner">
<!-- Lengthy vertically scrolling content -->
</div>
</div><!-- .carousel-inner -->
</div><!-- #carouselMembers -->
</div><!-- .row -->
</div><!-- .container -->
And here's the corresponding CSS:
.pool-carousel-inner {
overflow-y: auto;
}
Just to provide some additional context, I am utilizing Stimulus for other JavaScript functionalities, hence the controller attributes. Following the Bootstrap documentation, I am explicitly initializing the carousel constructor from there to enable swiping. I'm utilizing a specific inner class (pool-carousel-inner) for CSS customization as I have carousels in different sections that need to behave and look distinctively.
I've experimented with setting the width of my pool-carousel-inner class to 50% and can confirm that swiping still works on the "empty" space that isn't occupied by the inner element. This indicates that the carousel is correctly set up. However, when I attempt to swipe or drag left to right over the inner content, it seems like it's attempting to scroll the entire browser window instead of handling the interaction events within Bootstrap.