嵌套jQuery Carousel冲突：子轮播无法正常工作

核心错误分析 #

1. 类选择器语法错误：
   JS中所有通过class绑定点击事件的代码都缺失了.前缀，比如$("home")会被解析为选择<home>标签，而非class为home的元素，正确写法应为$(".home")。

2. 轮播索引超出范围：

   • 主轮播myCarousel仅包含3个.item（索引0、1、2），但代码中存在myCarousel.carousel(3)的调用，超出有效索引范围。
   • 子轮播proposalCarousel仅包含2个.item（索引0、1），但点击事件中调用了carousel(2)、carousel(3)，直接导致子轮播切换到不存在的项，显示空白。

3. 嵌套轮播事件冒泡（可选优化）：
   默认情况下，子轮播的点击事件可能会冒泡到主轮播，导致意外触发主轮播切换，可通过event.stopPropagation()阻止。

修正后的完整代码 #

HTML部分

<div class="carousel slide" id="myCarousel" data-bs-interval="false">
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <div class="content-item">主页内容</div>
        </div>
        <div class="item">
            <div class="content-item">体验页内容</div>
        </div>
        <div class="item">
            <div class="content-item">
                <div class="proposal-list">
                    <div class="proposal-list-item socializzazione">Socializzazione</div>
                    <div class="proposal-list-item pre-adozione">Consulenze pre-adozione</div>
                    <div class="proposal-list-item Educazione">Educazione di base/avanzata</div>
                    <div class="proposal-list-item Passeggiate">Passeggiate educative</div>
                </div>
                <div class="carousel slide" id="proposalCarousel" data-bs-interval="false">
                    <div class="carousel-inner" role="listbox">
                        <div class="item active">子轮播项1内容</div>
                        <div class="item">子轮播项2内容</div>
                        <div class="item">子轮播项3内容</div>
                        <div class="item">子轮播项4内容</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 主轮播切换按钮示例 -->
    <a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
    </a>
</div>

<!-- 主轮播导航按钮示例 -->
<div class="nav-buttons">
    <div class="home">主页</div>
    <div class="esperienze">体验</div>
    <div class="proposte">提案</div>
</div>

JS部分

$(document).ready(function(){
    // 主轮播初始化
    var myCarousel = $("#myCarousel").carousel({
        interval: false
    });  

    // 主轮播导航点击事件（修正类选择器和索引）
    $(".home").on("click", function(){
        myCarousel.carousel(0);
    });
    $(".esperienze").on("click", function(){
        myCarousel.carousel(1);
    });
    $(".proposte").on("click", function(){
        myCarousel.carousel(2);
    });

    // 子轮播初始化
    var proposalCarousel = $("#proposalCarousel").carousel({
        interval: false
    });

    // 子轮播导航点击事件（修正类选择器+阻止冒泡）
    $(".socializzazione").on("click", function(e){
        e.stopPropagation();
        proposalCarousel.carousel(0);
    });
    $(".pre-adozione").on("click", function(e){
        e.stopPropagation();
        proposalCarousel.carousel(1);
    });
    $(".Educazione").on("click", function(e){
        e.stopPropagation();
        proposalCarousel.carousel(2);
    });
    $(".Passeggiate").on("click", function(e){
        e.stopPropagation();
        proposalCarousel.carousel(3);
    });
});

关键说明 #

• 确保子轮播的.item数量与点击事件中调用的carousel(index)索引完全匹配，索引从0开始计数。
• e.stopPropagation()可避免子轮播操作意外触发主轮播切换。
• 主轮播导航按钮必须存在对应的class，否则点击事件无法绑定。

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