I have a plugin called Owl-Carousel that allows for sliding functionality.
It automatically slides, but you can also manually slide it by dragging the slides.
I want to insert some divs inside the slides; however, if the drag starts from that div, I don't want it to cause the slide to move. The div is clickable, so I don't want users accidentally scrolling it when they intend to click on it.
Here's an example:
<div class="owl-carousel">
<figure>
<div class="foo">Content...</div>
<img src="blablabla.jpg">
</figure>
</div>
I would like the foo div to move with the rest of the content, without enabling scroll through clicking and dragging specifically on this div. However, I still want users to be able to scroll by clicking elsewhere and dragging.
Is there a solution for this?
In CSS, there is the option of pointer-events: none, but I need the div to remain clickable.
This solution could involve HTML, CSS, JavaScript (jQuery or "vanilla"), or even an option within Owl-Carousel itself.