I've seen a lot of questions about placing an Owl carousel control inside a Bootstrap tab pane. For instance, Owl Carousel not working inside Bootstrap Tabs and Owl Carousel broken inside tab panel.
I'd like to implement the opposite: to place Bootstrap tab panes inside a slide (div) within Owl carousel. Unfortunately, it doesn't work: clicking on a button group doesn't switch the tabs. If I get the slide outside of the carousel, it starts working. I've found what is the problem. Owl Carousel creates copies of the slide (owl-item cloned) to make the slides look looped. As the result, there are several button groups with the same id and name. They are conflicting, so switching tabs doesn't work.
Is there a way to workaround the issue somehow? Or Owl carousel support just simple, cloneable, types of slides?
If I set loop to false, it helps, but I'd like to keep the slides looped.
$('.owl-carousel').owlCarousel({
items: 1,
loop: false, // <--------
nav: true,
});