Kombinieren von zwei Jquery-Plug-ins: funktioniert nicht

Question

Okay, also habe ich versucht, den CarouFredSel- und jquery-Scroller für benutzerdefinierte Inhalte zu kombinieren, um ein Bild einer Bildlaufleiste hinzuzufügen, die mit dem Karussell arbeitet. Ich bin mir ziemlich sicher, dass ich etwas falsch mache, da ich neu bei Jquery bin (sehr, sehr neu). Hier

ist das Skript:

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

Hier ist der HTML ist:

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

Hier ist ein Link zu dem, was ich erreicht habe bisher: http://2938.sandbox.i3dthemes.net/index-scroll-w-bar.html - Sie sehen, dass alles können funktioniert und aussieht wie ich will, aber der Schieberegler bewegt sich nicht?

HILFE .... bitte!

Answer 1

Gerade Ändern Sie den ersten 6 Zeilen oberhalb

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

auf die folgenden:

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

Notieren Sie die Reihenfolge der angehängten Skriptdatei;

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

Sie sollten zunächst jQuery Core-laden und dann seine UI-Bibliothek laden:

<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

Sie sind nicht Ihre Skripte in der erwarteten Reihenfolge verweisen, so dass jQuery UI erhält nicht instanziiert richtig und das mCustomScrollbar Plugin funktioniert nicht .

Allererste sollte jQuery sein, dann 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> 
...