jquery - 右边最后一个项目后轮播消失了

Question

左按钮工作正常，但不是右按钮，在最后一项后再次单击右箭头后，整个轮播折叠。 演示在这里

<div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1" ></li>
        <li data-target="#myCarousel" data-slide-to="2" ></li>
    </ol>

    <div class="carousel-inner">

        <div class="item active">
            <img src="http://www.realtyrendezvous.com/panoramic_view_of_lake_and_mountains_op_800x300.jpg"/>
        </div>
        <div class="item">
            <img src="http://www.organmountains.org/omm/wp-content/uploads/2012/03/Mount-Cox-2-Charlie-Kennedy-800x300.jpg"/>
        </div>
        <div class="item">
            <img src="http://www.michaelducharme.com/files/5813/4332/8709/Panorama1-800x300.jpg"/>
        </div>
            <a href="#myCarousel" class="left carousel-control" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
            <a href="#myCarousel" class="right carousel-control" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
    </div>

</div>

Answer 1

您的 div 没有像应有的那样关闭，试试这个（carousel-inner 必须在项目后关闭）。

<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
</ol>

<div class="carousel-inner">

    <div class="item active">
        <img src="http://www.realtyrendezvous.com/panoramic_view_of_lake_and_mountains_op_800x300.jpg">
    </div>
    <div class="item">
        <img src="http://www.organmountains.org/omm/wp-content/uploads/2012/03/Mount-Cox-2-Charlie-Kennedy-800x300.jpg">
    </div>
    <div class="item">
        <img src="http://www.michaelducharme.com/files/5813/4332/8709/Panorama1-800x300.jpg">
    </div>
</div>
    <a href="#myCarousel" class="left carousel-control" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
    <a href="#myCarousel" class="right carousel-control" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>