Question

此轮播中共有2个项目/图像。加载第二个图像后，Carousel尝试移动到第三个项目（没有），旋转木马就消失了。在中间层之后，旋转木马返回第一张图像。

Carousel幻灯片如......

Item 1 > Item 2 > Disappear > Item 1 > ...

版本是Bootstrap 2.1和jQuery 1.8.1。以下是代码。

<script type="text/javascript" src="media/jui/js/jquery.min.js"></script>
<script type="text/javascript" src="media/jui/js/bootstrap.min.js"></script>

<div id="homeCarousel" class="carousel">
        <div class="carousel-inner">
            <div class="item active">
                <img src="images/hawk2.jpg" alt="" >
            </div>
            <div class="item">
                <img src="images/hawk5.jpg" alt="" >
            </div>

            <div class="carousel-caption">
                    <ul class="nav nav-tabs">
                    <li class="active"><a href="#home" data-toggle="tab">
                            <h1>**</h1>
                            <h4>Business Applications</h4>
                    </a></li>
                    <li><a href="#profile" data-toggle="tab"><h1>**</h1>
                            <h4>IT Infrastructure</h4></a></li>
                    <li><a href="#messages" data-toggle="tab"><h1>**</h1>
                            <h4>Web & Content</h4></a></li>
                </ul>

            </div>
            <a class="carousel-control right" href="#homeCarousel" data-slide="next">&rsaquo;</a>
            <a class="carousel-control left" href="#homeCarousel" data-slide="prev">&lsaquo;</a>

        </div>
    </div>

这里可能有什么问题？

-Update：我尝试将jQuery更新为1.8.3并将Bootstrap更新为2.2.2 - 无变化

Answer 1

遇到同样的问题，您必须将下一个和上一个按钮放在.carousel-inner div之外。

您的代码在该div中包含下一个和上一个按钮。

Answer 2

轮播字幕应位于任何项目类别中：

<script type="text/javascript" src="media/jui/js/jquery.min.js"></script>
<script type="text/javascript" src="media/jui/js/bootstrap.min.js"></script>

<div id="homeCarousel" class="carousel">
<div class="carousel-inner">
    <div class="item active">
        <img src="images/hawk2.jpg" alt="" >
        <div class="carousel-caption"> <!-- carousel-caption begin -->
            <ul class="nav nav-tabs">
                <li class="active"><a href="#home" data-toggle="tab">
                        <h1>**</h1>
                        <h4>Business Applications</h4>
                </a></li>
                <li><a href="#profile" data-toggle="tab">
                    <h1>**</h1>
                    <h4>IT Infrastructure</h4>
                </a></li>
                <li><a href="#messages" data-toggle="tab">
                    <h1>**</h1>
                    <h4>Web & Content</h4>
                </a></li>
            </ul>
        </div> <!-- carousel-caption end -->
    </div>
    <div class="item">
        <img src="images/hawk5.jpg" alt="" >
        <div class="carousel-caption"> <!-- carousel-caption begin -->
            <ul class="nav nav-tabs">
                <li class="active"><a href="#home" data-toggle="tab">
                        <h1>**</h1>
                        <h4>Business Applications</h4>
                </a></li>
                <li><a href="#profile" data-toggle="tab">
                    <h1>**</h1>
                    <h4>IT Infrastructure</h4>
                </a></li>
                <li><a href="#messages" data-toggle="tab">
                    <h1>**</h1>
                    <h4>Web & Content</h4>
                </a></li>
            </ul>
        </div> <!-- carousel-caption end -->
    </div>
    </div>
    <a class="carousel-control right" href="#homeCarousel" data-slide="next">&rsaquo;</a>
    <a class="carousel-control left" href="#homeCarousel" data-slide="prev">&lsaquo;</a>
</div>

Bootstrap Carousel在最后一项消失

2 个答案: