javascript - jQueryが相互に上書き、noConflictが機能しない

Question

私のページには 3 つの jquery スクリプトがあります。メニューの 2 番目のスクリプトが 3 番目のスクリプトであるカルーセルに干渉しています。2 番目のスクリプトを取り出すと、カルーセルが再び機能します。noConflict を入れてみましたが、さらに多くのものを壊すので、間違った場所に入れているのかもしれません。これが私のコードです：

<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
</script>


<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($){

    $('#main-menu').prepend('<div id="menu-icon">Menu</div>');

    $("#menu-icon").on("click", function(){
        $("#nav").slideToggle();
        $(this).toggleClass("active");
    });

});
</script>


<script type="text/javascript" language="javascript" src="js/jquery.carouFredSel-5.5.0-packed.js"></script>
<script type="text/javascript" language="javascript">
    $(function() {
        $('#foo4').carouFredSel({
            responsive: true,
            width: '100%',
            scroll: 2,
            items: {
                width: 400,
                    visible: {
                    min: 6,
                    max: 6
                }
            }
        });

    });
</script>