jcarousellite, image carousel doesn’t work in sidebar???

Hi all,

I am trying to get a vertical image carousel based on jcarousellite to work in my sidebar. If i have the code in a plain html page with plugin and jquery includes it works

<script language='JavaScript' type='text/javascript'>  

	$(document).ready(function() {
	$(".test").jCarouselLite({
		btnNext: ".next",
		btnPrev: ".prev",
		vertical: true,
		circular: false
	});

	});

</script>

<style type="text/css">

.test {
height: 250px;
width: 200px;
overflow:hidden;
display:block;
background-color:#009900;
}

</style>
<a href="#" class="prev">prev</a>
<div class="test" >
  <ul>
    <li> <img src="/index.php?image_id=3&thumbnail=true&width=64&height=64" class="drag_and_drop_item" alt='Servet' title='Servet' />
								</li>
      <li> <img src="/index.php?image_id=4&thumbnail=true&width=64&height=64" class="drag_and_drop_item" alt='Servet' title='Servet' />
.</li>
      <li> <img src="/index.php?image_id=3&thumbnail=true&width=64&height=64" class="drag_and_drop_item" alt='Servet' title='Servet' />
    </li>
	  <li> <img src="/index.php?image_id=6&thumbnail=true&width=64&height=64" class="drag_and_drop_item" alt='Servet' title='Servet' />
 </li>
  </ul>
</div>
<a href="#" class="next">next</a>

When i include the code in my WP sidebar it doesn’t work anymore. How can i trace conflicting code???

Any tips?