結合兩個jQuery插件：不工作

Question

好吧，所以我一直在嘗試將CarouFredSel和jquery自定義內容滾動器結合使用，以添加與滾動條一起使用的滾動條圖像。我非常確定自己是新來的Jquery（非常非常新），所以我做錯了什麼。

下面是腳本：

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script> 
    <script src="jquery.easing.1.3.js" type="text/javascript"></script> 
<script type="text/javascript" language="javascript" src="jquery.js"></script> 
    <script type="text/javascript" language="javascript" src="jquery.mousewheel.js"></script> 
<script type="text/javascript" language="javascript" src="jquery.touchwipe.1.1.1.js"></script> 
    <script type="text/javascript" language="javascript" src="jquery.carouFredSel-5.5.0-packed.js"></script> 

    <script type="text/javascript" language="javascript"> 
     $(function() { 

     $("#foo3").carouFredSel({ 
      items : 2, 
      auto: { 
       duration: 750 
       }, 
      scroll : { 
       items: 1, 
       duration: 750, 
       mousewheel: true, 
       wipe: true, 
       pauseOnHover: true, 
      onAfter: function() { 
    if ($(this).triggerHandler("currentPosition") == 0) { 
    $(this).trigger("pause"); 
    } 
}}, 
     }).parent().css("margin", "auto"); 
     }); 

    </script> 

下面是HTML：

<div id="portfolio_gallery"> 
     <div class="list_carousel"> 

     <div id="mcs5_container"> 
<div class="customScrollBox"> 
<div class="horWrapper"> 
<div class="container"> 
<div class="content"> <p><ul id="foo3"> 
      <li style="width:486px"><img src="Images/SMP-3.jpg" alt="Testing description" /></li> 
       <li style="width:486px"><img src="Images/SMP-6.jpg" alt="Text_2" /></li> 
       <li style="width:238px"><img src="Images/SMP-4.jpg" alt="Text_6" /></li> 
       <li style="width:486px"><img src="Images/SMP-2.jpg" alt="Text_3" /></li> 
        <li style="width:238px"><img src="Images/SMP-5.jpg" alt="new description" /></li> 
       <li style="width:486px"><img src="Images/SMP-1.jpg" longdesc="" width="486" height="360" alt="Text_5" /></li> 

      </ul> 
      </p><div class="clearfix"></div> 
    </div> 
</div> 

</div> 
</div> 
<div class="dragger_container"> 
<div class="dragger"></div> 
</div> 
</div> 
<!-- scroll buttons --> 
<a class="scrollUpBtn" href="#"></a> <a class="scrollDownBtn" href="#"></a> 
</div> 
</div> 
<noscript> 
<style type="text/css"> 
    #mcs5_container .customScrollBox{overflow:auto;} 
    #mcs5_container .dragger_container{display:none;} 
</style> 
</noscript> 

</div> 
<script> 
$(window).load(function() { 
     $("#mcs5_container").mCustomScrollbar("horizontal",500,"easeOutCirc",1,"fixed","yes","yes",20); 
}); 
</script> 
<script src="jquery.mCustomScrollbar.js" type="text/javascript"></script> 

這裏是什麼事情讓我迄今完成的鏈接：http://2938.sandbox.i3dthemes.net/index-scroll-w-bar.html - 你可以看到一切正常，並期待我想要的方式，但滑塊不移動？

幫助....請！

Answer 1

只是改變前6行以上

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script> 
<script src="jquery.easing.1.3.js" type="text/javascript"></script> 
<script type="text/javascript" language="javascript" src="jquery.js"></script> 
<script type="text/javascript" language="javascript" src="jquery.mousewheel.js"></script> 
<script type="text/javascript" language="javascript" src="jquery.touchwipe.1.1.1.js"></script> 
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-5.5.0-packed.js"></script> 

以下內容：

<script type="text/javascript" language="javascript" src="jquery.js"></script> 
<script src="jquery.easing.1.3.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script> 
<script type="text/javascript" language="javascript" src="jquery.mousewheel.js"></script> 
<script type="text/javascript" language="javascript" src="jquery.touchwipe.1.1.1.js"></script> 
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-5.5.0-packed.js"></script> 

請注意附加腳本文件的排列順序;

jquery.js 
jquery.easing.1.3.js 
jquery-ui.min.js 
jquery.mousewheel.js 
jquery.touchwipe.1.1.1.js 
jquery.carouFredSel-5.5.0-packed.js 

Answer 2

你應該首先加載jQuery的核心，然後加載其UI庫：

<script type="text/javascript" language="javascript" src="jquery.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script> 

Answer 3

您沒有按預期的順序引用您的腳本，從而jQuery用戶界面不能正確實例化和mCustomScrollbar的插件不工作。

非常第一個應該是jQuery的，然後jQuery用戶界面：

<script type="text/javascript" language="javascript" src="jquery.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script> 
...