jcarousel in wordpress - jQuery(".first-and-second-carousel").jcarousel is not a function
Hi,
I'm trying to use jcarousel in wordpress, my html test page works fine so I added the scripts and the codes to 'header.php' in wordpress but all I get is just the bulleted images with bullet dots, looks like the jquery is not loading or the trigger is not working properly.
firebug shows this error: "jQuery(".first-and-second-carousel").jcarousel is not a function"
below is the code i am using:
"header.php":
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' src='<?php bloginfo('stylesheet_directory'); ?>/js/jquery-1.4.2.min.js'></script>
<script type='text/javascript' src='<?php bloginfo('stylesheet_directory'); ?>/js/jquery.jcarousel.min.js'></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.first-and-second-carousel').jcarousel();
});
</script>
"HTML code in my wordpress page":
<div id="wrap">
<ul id="first-carousel" class="first-and-second-carousel jcarousel-skin-tango">
<li><img src="../portfolio/img1.jpg" width="394" height="394" alt="" /></li>
<li><img src="../portfolio/img2.jpg" width="394" height="394" alt="" /></li>
</ul>
</div>
Any help would be appreciated.