Bootstrap Image Slider Controls Does Not Work Properly

问题

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

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!

回答1:

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

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

Some additional info on IDs:

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.

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.

回答2:

Your code has no problem. But You have used a older version of jQuery. Please update with newer version.

http://take.ms/Rbwmf

You can use this version. It is working perfectly with your code.

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

Thanks

来源：https://stackoverflow.com/questions/44330780/bootstrap-image-slider-controls-does-not-work-properly