javascript - jQuery相互覆盖，noConflict不起作用

Question

我的页面上有 3 个 jquery 脚本。菜单的第二个脚本干扰了第三个脚本，即轮播。当我取出第二个脚本时，轮播再次工作。我尝试放入 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>