CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapcarousel
Chris Peach
Chris Peach

Reputation: 1

Twitter Bootstrap - Carousel

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

Upvotes: 0

Views: 2067

Answers (2)

sangram parmar
sangram parmar

Reputation: 8726

try this

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

Upvotes: 1

SergeL
SergeL

Reputation: 680

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

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

Upvotes: 0

Related Questions