Twitter引导程序-轮播

Question

I've done this before in the tutorial and it works flawlessly, now when I go to recreate it it refuses to work, I'll supply the code and error reports.

HTML:

<div class="carousel slide" id="myCarousel">
    <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>
        <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active"><img src="http://placehold.it/1200x480" alt="placeholdit"></div>
        <div class="item"><img src="http://placehold.it/1200x481" alt="placeholdit"></div>
        <div class="item"><img src="http://placehold.it/1200x480" alt="placeholdit"></div>
        <div class="item"><img src="http://placehold.it/1200x482" alt="placeholdit"></div>
    </div>
</div>

JS: (File links are placed in the body and so is the code)

<script src="js/bootstrap.js"></script>
<script src="js/jquery.js"></script>
<script>
    $(document).ready(function() {
        $('#myCarousel').carousel({interval: 2000});
    });
</script>

ERROR REPORTS:

TypeError: $ is not a function file:///C:/Users/Christopher/Desktop/Portfolio_Final/js/bootstrap.js Line 29

TypeError: $(...).carousel is not a function file:///C:/Users/Christopher/Desktop/Portfolio_Final/index.html#myCarousel Line 89

As it seems, its reporting errors of functions not existing, jquery version is on 1.9.1

Answer 1

try this

    jQuery.noConflict();
    jQuery(document).ready(function () {
        jQuery('#myCarousel').carousel({ interval: 2000 });
    });

Answer 2

Bootstrap plugins depends on jQuery. So you have to load it first.

<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
...