0

我正在使用 Bootstrap 开发一个项目，并且添加了一个带有控件的简单图像轮播，但问题是控件不起作用。请在此处查看我的网站

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

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

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

4

2 回答 2

1

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

http://take.ms/Rbwmf

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

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

谢谢

于 2017-06-02T14:14:16.800 回答
0

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

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

有关 ID 的一些附加信息：

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

小建议：即使可以，也不要为 CSS 创建 ID，因为它们不是为此而生的。保留 ID 以在 JS 中使用。这将有助于保持你的代码干净一致。

于 2017-06-02T14:11:26.143 回答