jquery - carouFredSel is not a function -

i'm struggling set caroufredsel. i'm doing correctly - links work. i'm adding on online store using smarty templates. error in chrome console:

uncaught typeerror: jquery(...).caroufredsel not function

head section of header.tpl:

<!-- jquery -->        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>   <!-- caroufredsel --> <script src="http://example.com/js/jquery.caroufredsel-6.2.1.js" type="text/javascript"></script>   {literal}     <script type="text/javascript">     jquery(function() {           jquery('#carousel').caroufredsel({                 items                : 2,                 direction            : "up",                 scroll : {                     items            : 1,                     easing            : "elastic",                     duration        : 1000,                     pauseonhover    : true                 }             });         });     </script> {/literal} 

footer.tpl:

<div id='carousel'>     <img src='http://example.com/img1.png' width='105' />     <img src='http://example.com/img2.png' width='110' />     <img src='http://example.com/img3.png' width='105' />     <img src='http://example.com/img4.png' width='120' />     <img src='http://example.com/img5.png' width='105' />     <img src='http://example.com/img6.png' width='200' /> </div> 

css

#carousel img {     padding: 16px 10px 14px 10px; }  #carousel {     width: 1178px;     height: 126px;     margin: 0 auto; } 

what missing?