自舉輪播控件

Question

我正在使用Bootstrap中的Carousel。 我已經用許多不同的變體對此進行了測試。 即使我從引導程序復制並粘貼示例代碼，它仍然不起作用。 我已經驗證文件路徑是正確的。 控件仍然出現，但似乎沒有鏈接到任何東西。 我見過一些地方提到“功能”，但是當我添加此功能時，沒有任何變化。

<div class="container">
    <div id="myCarousel-example-generic" class="carousel slide">
        <!-- Indicators -->
        <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"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="pics/01.jpg" style="max-width: 100%;" />
                <div class="carousel-caption">
                    This should be first picture
                </div>
            </div>

            <div class="item">
                <img src="pics/02.jpg" style="max-width: 100%;" />
                <div class="carousel-caption">
                    This should be another picture

                </div>
            </div>
            <div class="item">
                <img src="pics/03.jpg" style="max-width: 100%;" />
                <div class="carousel-caption">
                    This is the last picture
                </div>
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
            <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
            <span class="icon-next"></span>
        </a>
    </div>



</div>

這是我與輪播相關的代碼，下面有這兩個js腳本調用

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>

我敢肯定這很簡單，但是我找不到這有什么問題。

Answer 1

您更改了輪播的ID，但沒有更新任何引用該ID的控件。 您的carousel-indicators和carousel-control需要引用“ myCarousel-example-generic”而不是“ carousel-example-generic”。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <div class="container"> <div id="myCarousel-example-generic" class="carousel slide"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#myCarousel-example-generic" data-slide-to="1"></li> <li data-target="#myCarousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://placehold.it/750x150?text=1" style="max-width: 100%;" /> <div class="carousel-caption"> This should be first picture </div> </div> <div class="item"> <img src="http://placehold.it/750x150?text=2" style="max-width: 100%;" /> <div class="carousel-caption"> This should be another picture </div> </div> <div class="item"> <img src="http://placehold.it/750x150?text=3" style="max-width: 100%;" /> <div class="carousel-caption"> This is the last picture </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#myCarousel-example-generic" data-slide="prev"> <span class="icon-prev"></span> </a> <a class="right carousel-control" href="#myCarousel-example-generic" data-slide="next"> <span class="icon-next"></span> </a> </div> </div>