如何在自舉輪播中顯示指標

Question

輪播應包含顯示當前幻燈片的指示器，並允許通過單擊指示器來選擇幻燈片。 幻燈片應在5秒后更改。 根據Bootstrasp 3傳送帶文檔，它應該支持這一點。 實際上，沒有顯示指標。

我嘗試了引導手冊中的代碼：

    <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            <li data-target="#carousel-example-generic" data-slide-to="3"></li>
            <li data-target="#carousel-example-generic" data-slide-to="4"></li>
            <li data-target="#carousel-example-generic" data-slide-to="5"></li>
            <li data-target="#carousel-example-generic" data-slide-to="6"></li>
            <li data-target="#carousel-example-generic" data-slide-to="7"></li>
            <li data-target="#carousel-example-generic" data-slide-to="8"></li>
        </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
            <div class="item active">

                <a href="/store/Webconte/Details/124">
                    <img src="/store/Webconte/Image/124" />
                </a>
            </div>
            <div class="item ">

                <a href="/store/Webconte/Details/123">
                    <img src="/store/Webconte/Image/123" />
                </a>
            </div>
            <div class="item ">

                <a href="/store/Webconte/Details/105">
                    <img src="/store/Webconte/Image/105" />
                </a>
            </div>
            <div class="item ">

                <a href="/store/Webconte/Details/95">
                    <img src="/store/Webconte/Image/95" />
                </a>
            </div>
            <div class="item ">

                <a href="/store/Webconte/Details/107">
                    <img src="/store/Webconte/Image/107" />
                </a>
            </div>
            <div class="item ">

                <a href="/store/Webconte/Details/100">
                    <img src="/store/Webconte/Image/100" />
                </a>
            </div>
            <div class="item ">

                <a href="/store/Webconte/Details/98">
                    <img src="/store/Webconte/Image/98" />
                </a>
            </div>
            <div class="item ">

                <a href="/store/Webconte/Details/78">
                    <img src="/store/Webconte/Image/78" />
                </a>
            </div>
            <div class="item ">

                <a href="/store/Webconte/Details/11">
                    <img src="/store/Webconte/Image/11" />
                </a>
            </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        </a>
    </div>

但是不顯示指示符。 如何解決呢？

Answer 1

將.carousel-indicators放入.carousel-inner 。

UPD：好的，請嘗試以下操作：

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
    <div class="item active">

        <a href="/store/Webconte/Details/124">
            <img src="/store/Webconte/Image/124" />
        </a>
    </div>
    <div class="item ">

        <a href="/store/Webconte/Details/123">
            <img src="/store/Webconte/Image/123" />
        </a>
    </div>
    <div class="item ">

        <a href="/store/Webconte/Details/105">
            <img src="/store/Webconte/Image/105" />
        </a>
    </div>
    <div class="item ">

        <a href="/store/Webconte/Details/95">
            <img src="/store/Webconte/Image/95" />
        </a>
    </div>
    <div class="item ">

        <a href="/store/Webconte/Details/107">
            <img src="/store/Webconte/Image/107" />
        </a>
    </div>
    <div class="item ">

        <a href="/store/Webconte/Details/100">
            <img src="/store/Webconte/Image/100" />
        </a>
    </div>
    <div class="item ">

        <a href="/store/Webconte/Details/98">
            <img src="/store/Webconte/Image/98" />
        </a>
    </div>
    <div class="item ">

        <a href="/store/Webconte/Details/78">
            <img src="/store/Webconte/Image/78" />
        </a>
    </div>
    <div class="item ">

        <a href="/store/Webconte/Details/11">
            <img src="/store/Webconte/Image/11" />
        </a>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    </a>
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
        <li data-target="#carousel-example-generic" data-slide-to="4"></li>
        <li data-target="#carousel-example-generic" data-slide-to="5"></li>
        <li data-target="#carousel-example-generic" data-slide-to="6"></li>
        <li data-target="#carousel-example-generic" data-slide-to="7"></li>
        <li data-target="#carousel-example-generic" data-slide-to="8"></li>
    </ol>
</div>

Answer 2

實際上指標正在顯示。 組：

.carousel-indicators li {
    background-color: black;
}

您可以在頁面底部看到它們。

編輯：

嘗試使用此方法，然后在頁面底部查找它們：

.carousel-indicators {
    background-color: black;
}