Hi I am trying to integrate two scripts of javascript on a single page one for a slider and the other for a scroller but if one works the other doesnt work, I have been trying to read about teh jquery conflict but I cannot seem to be able to implement can someone please help me out
these are the script I need on the page
<!-- SLIDESHOW FILES -->
<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory')?>/js/home-slider/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory')?>/js/home-slider/jquery-autoplay.pikachoose.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory')?>/js/home-slider/jquery.pikachoose.js"></script>
<!-- SLIDESHOW FILES -->
<!-- SCROLLER FILES -->
<script type="text/javascript" src="<?php bloginfo('template_directory')?>/js/image-scroller/jquery-1.2.1.pack.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory')?>/js/image-scroller/jMyCarousel.js"></script>
<!-- SCROOLER FILES -->
<!-- SLIDESHOW FUNCTION -->
<script language="javascript">
$(document).ready(
function (){
$("#pikame").PikaChoose({carousel:true, hoverPause:true});
});
</script>
<!-- SLIDESHOW FUNCTION -->
<!-- SCROLLER FUNCTION -->
<script type="text/javascript">
$(function() {
$(".jMyCarousel").jMyCarousel({
visible: '4',
eltByElt: true,
evtStart: 'mousedown',
evtStop: 'mouseup'
});
});
</script>
<!-- SCROLLER FUNCTION -->