Why is this bootstrap script not responding/working?

Question

I have a bootstrap slider that is not sliding and not even responding when I click on the controls. I can see the first picture but no matter where I click I can't access the other images. Is this script below working for you?

    <head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<script src="js/jquery.js"></script>
<script src="js/jquery-migrate-1.1.1.js"></script>
<script src="js/script.js"></script>

    </head>


<body>
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://placehold.it/450x350" alt="Slide 1">
      <div class="carousel-caption">
        Caption Slide 1
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/450x350" alt="Slide 2">
      <div class="carousel-caption">
        Caption Slide 2
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/450x350" alt="Slide 3">
      <div class="carousel-caption">
        Caption Slide 3
      </div>
    </div>        
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</body>

What errors are you getting in the browser's console? And doesn't jQuery have to be included before Bootstrap? — j08691, Oct 17 '16 at 17:21
Protip: keep the [JS console open](http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers). One look there would have given you the answer immediately. — JJJ, Oct 17 '16 at 17:29

score 1 · Accepted Answer · answered Oct 17 '16 at 17:30

1

In detail:

Bootstrap is a js file that has some jquery events attached to it. And if you place the jquery script below it, the events will not be attached. Hence you need to add jquery always above to attach the events.

Hope this explanation helps :)

answered Oct 17 '16 at 17:30

Kinshuk Lahiri

1,468
10
23

Why is this bootstrap script not responding/working?

1 Answers1