3

このカルーセルには合計 2 つのアイテム/画像があります。2 番目の画像が読み込まれた後、カルーセルは 3 番目のアイテム (何もありません) に移動しようとし、カルーセルは消えます。インターベルの後、カルーセルは最初の画像に戻ります。

カルーセルは..のようにスライドします。

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

カルーセル キャプションは、任意のアイテム クラス内にある必要があります。

<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 に答える