Multiple Javascript On Same Page Not Working Help

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 the 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 -->

Code (markup):

 

Can you try replacing all the instance of $ with jQuery or $(function() { to jQuery(function($) and use only 1 document ready

 

Hi guys I've managed to fix this way thanks fo rthe help

        <!-- 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 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>
          <!-- SLIDESHOW FILES -->
       
 
        <script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
                $("#pikame").PikaChoose({carousel:true, hoverPause:true});
});
    $(function() {
                $(".jMyCarousel").jMyCarousel({
                visible: '4',
                eltByElt: true,
                evtStart: 'mousedown',
                evtStop: 'mouseup'
                });
 
                });</script>

Code (markup):