jquery - 组合两个Jquery插件: Not Working

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 - 您可以看到一切正常并且看起来像我想要的那样，但 slider 不移动？

请帮助......请!

Answer 1

您没有按预期顺序引用脚本，因此 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>
...