Bootstrap 图像滑块控件无法正常工作

Question

我正在 Bootstrap 做一个项目，我添加了一个带控件的简单图像轮播，但问题是控件不起作用。请查看我的网站 here

如您所见，您无法按 下一张 和 上一张 按钮来查看其他图像。这是我的代码：

<div class="row">
    <div class="container">
        <div class="col-md-3">
        </div>
        <div class="col-md-6">
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="images/slideshow/1.jpg" alt="Los Angeles" style="width:100%;">
                        <div class="carousel-caption">
                            <h3>Los Angeles</h3>
                            <p>LA is always so much fun!</p>
                        </div>
                    </div>

                    <div class="item">
                        <img src="images/slideshow/2.jpg" alt="Chicago" style="width:100%;">
                        <div class="carousel-caption">
                            <h3>Chicago</h3>
                            <p>Thank you, Chicago!</p>
                        </div>
                    </div>

                    <div class="item">
                        <img src="images/slideshow/3.jpg" alt="New York" style="width:100%;">
                        <div class="carousel-caption">
                            <h3>New York</h3>
                            <p>We love the Big Apple!</p>
                        </div>
                    </div>

                </div>

                <!-- Left and right controls -->
                <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
        <div class="col-md-3">
        </div>
    </div>
</div>

基本上我没有发现这段代码有任何错误，所以如果你知道哪里出了问题，请告诉我...谢谢！

Answer 1

您在此页面上多次使用 id="myCarousel"。

每页只能有一个唯一 ID。删除另一个 id="myCarousel" 可以解决您的问题。

关于 ID 的一些附加信息：

ID 在这里是为了 Javascript 可以很容易地定位元素。但是，虽然它们使使用 JS 定位元素变得容易，但它们必须是唯一的，否则脚本将无法知道要定位哪个 ID。还有许多其他方法可以使用 JS 定位元素，但这种方法仍然是最简单的方法之一。

小建议：即使可以，也不要为 CSS 创建 ID，因为它们并非为此目的。保留 JS 中使用的 ID。这将有助于保持您的代码整洁一致。

Answer 2

你的代码没有问题。但是您使用的是 jQuery 的旧版本。请更新至较新版本。

http://take.ms/Rbwmf

您可以使用这个版本。它与您的代码完美配合。

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

谢谢

Bootstrap 图像滑块控件无法正常工作

Bootstrap Image Slider Controls Does Not Work Properly

css

carousel

twitter-bootstrap

bootstrap-carousel