Owl Carousel嵌入Bootstrap标签页切换失效，如何保留循环功能？

你遇到的问题核心确实是Owl Carousel循环模式下的slide克隆机制——为了实现无缝循环，它会复制首尾的slide生成.owl-item.cloned元素，这就导致页面中出现多组ID/name完全相同的Bootstrap标签控件，而Bootstrap的标签切换依赖唯一的ID关联，冲突自然就出现了。

不用放弃循环功能，这里有两个可行的解决思路：

思路一：修改克隆元素的标识，避免冲突 #

利用Owl Carousel的afterInit回调事件，在轮播初始化完成后，给克隆元素里的标签按钮和面板的ID、关联属性加上唯一后缀，消除重复：

$('.owl-carousel').owlCarousel({
    items: 1,
    loop: true,
    nav: true,
    afterInit: function() {
        // 遍历所有克隆的slide
        $('.owl-item.cloned').each(function() {
            // 处理标签按钮
            $(this).find('.nav-link').each(function() {
                let originalHref = $(this).attr('href');
                let originalTarget = $(this).attr('data-bs-target');
                // 给href和data-bs-target加后缀
                if (originalHref) $(this).attr('href', originalHref + '-cloned');
                if (originalTarget) $(this).attr('data-bs-target', originalTarget + '-cloned');
            });
            // 处理标签面板
            $(this).find('.tab-pane').each(function() {
                let originalId = $(this).attr('id');
                if (originalId) $(this).attr('id', originalId + '-cloned');
            });
        });
    }
});

注：如果你用的是Bootstrap 3，把data-bs-target换成data-target即可。

思路二：放弃ID关联，自定义标签切换逻辑 #

绕过Bootstrap默认的ID绑定机制，自己编写点击事件，只对当前激活的slide内的标签进行操作：

// 先移除Bootstrap默认的标签切换事件
$('.nav-link').off('click.bs.tab');

// 自定义点击事件，仅作用于当前显示的slide内的标签
$(document).on('click', '.owl-item.active .nav-link', function(e) {
    e.preventDefault();
    let $tabGroup = $(this).closest('.nav-tabs').parent();
    // 清空当前slide内的所有激活状态
    $tabGroup.find('.nav-link').removeClass('active');
    $tabGroup.find('.tab-pane').removeClass('show active');
    // 激活当前点击的标签和对应面板
    $(this).addClass('active');
    let target = $(this).attr('data-bs-target') || $(this).attr('href');
    $tabGroup.find(target).addClass('show active');
});

这种方式不用修改DOM标识，直接通过上下文限制操作范围，更简洁。

Owl Carousel并非只能支持简单可克隆的slide，只是循环模式下的克隆会带来DOM重复标识的问题，只要针对性处理好标识冲突或者切换逻辑，就能在保留循环功能的同时正常使用Bootstrap标签。

内容的提问来源于stack exchange，提问作者Shtole