组合两个Jquery插件:不起作用

Question

好的，我一直在尝试将CarouFredSel和jquery自定义内容滚动条结合起来，添加一个滚动条的图像来处理carousel。我非常确定我做错了什么，因为我是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 UI，并且mCustomScrollbar插件无法工作。

​

​

第一个应该是jQuery，然后是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>
...