は二つの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 - あなたはすべての作品とルックスことがわかりますスライダーバーは動かないのですか？

HELP ....してください！

Answer 1

ただ、次のように

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

上記の最初の6行を変更します。

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