Bootstrap 3 carousel not working on Magento - magento

Question

Can't get this carousel to work on a Magento site. I have one image displaying ok, just the transition between images not happening.
Example that im working on here - http://dev.clothesforsale.co.nz/
Code below:
<div id="myCarousel" class="carousel slide">
<!-- 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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA);?>slider/example-banner-one.jpg" alt="Slider One" class="img-responsive"/>
</div>
</div>
<div class="carousel-inner">
<div class="item">
<img src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA);?>slider/example-banner-two.jpg" alt="Slider Two" class="img-responsive"/>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script type="text/javascript">
// <![CDATA[
$(function(){
$('.carousel').carousel();
});
// ]]>
</script>

Answer 1

At first glance, the console shows Object #<Object> has no method 'on' when the page loads, originating on line 163 of bootstrap.js. If I jQuery.fn.jquery in the console to get the jQuery version, it says 1.4.2.
This answer suggests that the on method (which Bootstrap appears to be using) wasn't added until jQuery 1.7. An upgrade might be the first step.