引导轮播控件答案

【问题标题】：Bootstrap Carousel Controls引导轮播控件
【发布时间】：2016-04-13 15:52:10
【问题描述】：

我正在使用引导程序中的轮播。我已经用许多不同的变化对此进行了测试。即使我从引导程序复制并粘贴示例代码，它仍然无法正常工作。我已经验证文件路径是准确的。控件仍然出现，但它们似乎没有链接到任何东西。我见过一些提到“功能”的地方，但是当我添加它时，什么都没有改变。

<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>

我确定这很简单，但我找不到问题所在。

【问题讨论】：

尝试在 <head> 标签中的 HTML 之前链接到 jQuery 和 Bootstrap JS？有时你确实需要 JS，但不是当你的整个页面结构和功能都需要它时。如果 DOM 已经加载，则事件处理程序可能无法工作。您的开发者控制台中有任何错误吗？
在您的建议和其他答案之间，我已经解决了这个问题。非常感谢您的帮助：D

标签： javascript css twitter-bootstrap carousel

【解决方案1】：

您更改了 carousel 的 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>

【讨论】：

我已经按照您的建议进行了更改。我认为这是我进行故障排除的一些复制和粘贴遗留下来的。但是，在进行更改后，我仍然遇到同样的问题。
@TheJakeMoony - 我无法使用答案中的代码复制您的问题。我刚刚将我的答案更新为可运行的 sn-p，以便您可以看到它正在工作。您页面中的其他内容是否可能会破坏它？
我不知道为什么，但是在复制并粘贴你的 sn-p 后它现在可以工作了。非常感谢：D 很抱歉提出 n00b 问题。