3

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

旋转木马幻灯片就像..

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>

这里有什么问题？

-更新：我尝试将 jQuery 更新到 1.8.3 并将 Bootstrap 更新到 2.2.2 - 没有变化

4

2 回答 2

7

有同样的问题，你必须把下一个和上一个按钮放在.carousel-innerdiv 之外。

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

于 2014-02-11T13:57:11.430 回答
1

carousel-caption 应该在任何项目类中：

<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>
于 2012-12-31T12:35:57.893 回答