Bootstrap Modal Base
HTML
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css">
<link rel="stylesheet" href="http://jschr.github.io/bootstrap-modal/css/bootstrap-modal.css">
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<script src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
<script src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modal.js"></script>
<button class="btn btn-lg btn-block" data-toggle="modal" data-target=".bs-example-modal-lg">CLICK HERE</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="http://cdn.banquenationale.ca/cdnbnc/2013/06/ruisseau.jpg">
</div>
<div class="item">
<img src="http://pixdaus.com/files/items/pics/4/68/127468_81126581de22e05a9a66d3216ae2b4ad_large.jpg">
</div>
<div class="item">
<img src="http://www.naturehighlights.com/images/25.1_Canada.jpg">
</div>
</div>
<a class="left carousel-control" href="#locations" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#locations" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
JavaScript
$(function(){
// You used .myCarousel here.
// That's the class selector not the id selector,
// which is #myCarousel
$('#carousel').carousel();
});