When I click on a button, a modal window opens with a carousel slider inside. However, I am experiencing issues with sliding on the chevron left and right buttons. On my computer, the images slide every 5 seconds, but on the JSFiddle platform, the sliding is not working. Can anyone help me identify the problem with the sliding function on the chevron buttons? In my larger project, I have two sliders, and when I click on the chevron in the modal window, the page scrolls down.
JSFIDDLE http://jsfiddle.net/3kgbG/802/
HTML
<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 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>