Bootstrap图像滑块控件无法正常工作 [英] Bootstrap Image Slider Controls Does Not Work Properly

问题描述

我正在Bootstrap中进行项目开发，并且添加了带有控件的简单图像轮播，但是问题是控件无法正常工作。请访问我的网站此处

I'm working on a project in Bootstrap and I have added a simple image carousel with controls but the problem is that the controls does not work.. See my site here

如您所见，您无法按 next 和 previous 按钮以查看其他图像。这是我的代码：

As you can see you can not press on next and previous buttons to see other images. Here's my code:

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

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

Basically I have not found any kind of mistake in this code ,so if you know what is going wrong please let me know... thanks!

推荐答案

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

You use the id="myCarousel" several time on this page.

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

You can only have ONE UNIQUE id per page. Removing the other id="myCarousel" fixes your issue.

一些有关ID的附加信息：

Some additional info on IDs:

ID是为了让Javascript轻松定位元素，请点击此处。但是，尽管它们使JS的定位元素变得容易，但它们必须唯一，否则脚本将无法知道要定位的ID。用JS定位元素的方法还有很多，但是这仍然是最简单的方法之一。

IDs are here in order for Javascript to target element quite easily. But while they make targeting element with JS easy, they need to be unique otherwise, the script won't be able to know which ID to target. There are many other way to target element with JS but this one stay one of the easiest one.

小建议：即使可以，也不要为CSS创建ID因为它们不是为了这个目的。保留ID供JS使用。这将有助于保持代码清洁的一致性。

Small advice: even if you can, don't create IDs for CSS since they are not meant for that. Leave the IDs for use in JS. That will help to keep your code clean consistent.

这篇关于Bootstrap图像滑块控件无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！