Probleme animation javaScript : carousel

Bonjour, je suis étudiant en informatique,
j'essaie de faire un carrousel en JS, pour des amis mais ça ne fonctionne pas et je ne sais pour quel raison une aide serait la bienvenu. voila mon code source:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>carousel</title>
<script src="js/jquery.js" type="text/javascript"></script>
<!--debut du slimbox-->
<link href="js/slimbox-2.04/css/slimbox2.css" type="text/css" />
<script src="js/slimbox-2.04/js/slimbox2.js" type="text/javascript"></script>
<!--fin slimbox-->
<!--debut carousel-->
<script type="text/javascript" src="js/cloud-carousel.js"></script>
<!--fin carousel-->

$(document).ready(function(){

$("#carousel2").CloudCarousel({
xPos:280,
yPos:80,
buttonLeft: $('#but3'),
buttonRight: $('#but4'),
FPS:30,
autoRotate: 'left',
autoRotateDelay: 1200,
speed:0.2,
mouseWheel:true,
bringToFront:true
});

});
</script>

</head>

<body>
<div id="carousel2" style="width:960px; height:400px;">
<a href="img/carousel/img1.png"><img class="CloudCarousel" src="img/carousel/img1.png" alt="Flag 1" width="88" height ="86"/></a>
<a href="img/carousel/img2.png"><img class="CloudCarousel" src="img/carousel/img2.png" alt="Flag 2" width="88" height ="86"/></a>
<a href="img/carousel/img3.png"><img class="CloudCarousel" src="img/carousel/img3.png" alt="Flag 3" width="88" height ="86"/></a>
<a href="img/carousel/img4.png"><img class="CloudCarousel" src="img/carousel/img4.png" alt="Flag 4" width="88" height ="86"/></a>

<div id="but3" class="carouselLeft" style="position:absolute;top:20px;left:20px;">gauche</div>
<div id="but4" class="carouselRight" style="position:absolute;top:20px;left:64px;">droite</div>
</div>
</body>
</html>