传送带内的旋转木马项目不能在自举中工作

Question

这是我的代码。有一个父滑块。在该滑块的类中，每个“项目”都有另一个滑块。外部滑块运行良好，但每当滑回时，嵌套滑块都消失。

如果您使用引导运行此代码，您一定会注意到这一点。

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
    <div class="item active"> 
     <div class="col-lg-12 col-md-12 col-sm-12 col-sx-12"> 
       <div id="carousel-example-generic2" class="carousel slide" data-ride="carousel"> 

        <!-- Wrapper for slides --> 
        <div class="carousel-inner" role="listbox"> 
        <div class="item active"> 
         1 
        </div> 
        <div class="item"> 
         2 
        </div> 
        </div> 

        <!-- Controls --> 
        <a class="left carousel-control" href="#carousel-example-generic2" role="button" data-slide="prev"> 
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
        <span class="sr-only">Previous</span> 
        </a> 
        <a class="right carousel-control" href="#carousel-example-generic2" role="button" data-slide="next"> 
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
        <span class="sr-only">Next</span> 
        </a> 
       </div><!--end of item--> 
     </div><!--end of col--> 
    </div> 
    <div class="item"> 
     <div class="col-lg-12 col-md-12 col-sm-12 col-sx-12"> 
       <div id="carousel-example-generic3" class="carousel slide" data-ride="carousel"> 

        <!-- Wrapper for slides --> 
        <div class="carousel-inner" role="listbox"> 
        <div class="item active"> 
         3 
        </div> 
        <div class="item"> 
         4 
        </div> 
        </div> 

        <!-- Controls --> 
        <a class="left carousel-control" href="#carousel-example-generic3" role="button" data-slide="prev"> 
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
        <span class="sr-only">Previous</span> 
        </a> 
        <a class="right carousel-control" href="#carousel-example-generic3" role="button" data-slide="next"> 
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
        <span class="sr-only">Next</span> 
        </a> 
       </div><!--end of item--> 
     </div><!--end of col--> 
    </div> 
    </div> 

</div> 

Answer 1

试试这个代码：

JAVASCRIPT：

$('#carousel-example-generic').carousel(); 
$('#carousel-example-generic2').carousel(); 
$('#carousel-example-generic3').carousel(); 

HTML：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
    <div class="item active"> 
     <div class="col-lg-12 col-md-12 col-sm-12 col-sx-12"> 
       <div id="carousel-example-generic2" class="carousel slide" data-ride="carousel"> 

        <!-- Wrapper for slides --> 
        <div class="carousel-inner" role="listbox"> 
        <div class="item2 active"> 
         1 
        </div> 
        <div class="item2"> 
         2 
        </div> 
        </div> 

        <!-- Controls --> 
        <a class="left carousel-control" href="#carousel-example-generic2" role="button" data-slide="prev"> 
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
        <span class="sr-only">Previous</span> 
        </a> 
        <a class="right carousel-control" href="#carousel-example-generic2" role="button" data-slide="next"> 
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
        <span class="sr-only">Next</span> 
        </a> 
       </div><!--end of item--> 
     </div><!--end of col--> 
    </div> 
    <div class="item"> 
     <div class="col-lg-12 col-md-12 col-sm-12 col-sx-12"> 
       <div id="carousel-example-generic3" class="carousel slide" data-ride="carousel"> 

        <!-- Wrapper for slides --> 
        <div class="carousel-inner" role="listbox"> 
        <div class="item3 active"> 
         3 
        </div> 
        <div class="item3"> 
         4 
        </div> 
        </div> 

        <!-- Controls --> 
        <a class="left carousel-control" href="#carousel-example-generic3" role="button" data-slide="prev"> 
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
        <span class="sr-only">Previous</span> 
        </a> 
        <a class="right carousel-control" href="#carousel-example-generic3" role="button" data-slide="next"> 
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
        <span class="sr-only">Next</span> 
        </a> 
       </div><!--end of item--> 
     </div><!--end of col--> 
    </div> 
    </div> 

</div>