旋转木马在右边的最后一个项目后消失了

时间:2013-09-30 06:31:15

标签: jquery twitter-bootstrap

左键工作正常,但不是正确的,整个旋转木马在最后一项后再次点击右箭头后折叠。 demo here

<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>

1 个答案:

答案 0 :(得分:3)

你的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>