Bootstrap Image Slider Controls Does Not Work Properly

Question

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!

Your code works fine here. [JSFiddle](https://jsfiddle.net/2o56d3mv/) — rafascar, Jun 02 '17 at 14:14

BizedKhan · Answer 1 · 2017-06-02T14:19:34.660

1

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

edited Jun 02 '17 at 14:19

answered Jun 02 '17 at 14:14

BizedKhan

634
5
12

I do believe this is what is wrong. You are using version 1.11.3 of jquery. It is very out of date. If you delete yours and put the one above, or this one below, it should work. – Sensoray Jun 02 '17 at 18:14

Niss · Accepted Answer · 2017-06-02T14:23:48.717

0

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.

edited Jun 02 '17 at 14:23

answered Jun 02 '17 at 14:11

Niss

116
6

I don't understand what are you talking about – Jun 02 '17 at 17:22
Can u please write the code that you are talking about it – Jun 02 '17 at 17:22
Inspecting the code of your website shows that there are 6 elements using the id="myCarousel" (just show the source code of your page and search for them) You can only have ONE id="myCarousel" per page, rename or delete the other ones. If they are used for something else, think of also editing the links that point to those IDs – Niss Jun 02 '17 at 19:02

Bootstrap Image Slider Controls Does Not Work Properly

2 Answers2

Linked