title: Combining Two Jquery Plug-ins: Not Working
body: <p>Okay, so I have been trying to combine the CarouFredSel and jquery custom content scroller to add an image of a scroll bar that works with the carousel. I am pretty sure that I am doing something wrong since I am new to Jquery (very, very new).</p>
  
  <p>Here is the script:</p>
  
  <pre><code>   &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"  type="text/javascript"&gt;&lt;/script&gt;
     &lt;script src="jquery.easing.1.3.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" language="javascript" src="jquery.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" language="javascript" src="jquery.mousewheel.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" language="javascript" src="jquery.touchwipe.1.1.1.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" language="javascript" src="jquery.carouFredSel-5.5.0-packed.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript" language="javascript"&gt;
          $(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");
          });
  
      &lt;/script&gt;
  </code></pre>
  
  <p>Here is the html:</p>
  
  <pre><code>&lt;div id="portfolio_gallery"&gt;
          &lt;div class="list_carousel"&gt;
  
           &lt;div id="mcs5_container"&gt;
  &lt;div class="customScrollBox"&gt;
  &lt;div class="horWrapper"&gt;
  &lt;div class="container"&gt;
  &lt;div class="content"&gt; &lt;p&gt;&lt;ul id="foo3"&gt;
              &lt;li style="width:486px"&gt;&lt;img src="Images/SMP-3.jpg" alt="Testing description" /&gt;&lt;/li&gt;
                  &lt;li style="width:486px"&gt;&lt;img src="Images/SMP-6.jpg" alt="Text_2" /&gt;&lt;/li&gt;
                  &lt;li style="width:238px"&gt;&lt;img src="Images/SMP-4.jpg" alt="Text_6" /&gt;&lt;/li&gt;
                  &lt;li style="width:486px"&gt;&lt;img src="Images/SMP-2.jpg" alt="Text_3" /&gt;&lt;/li&gt;
                    &lt;li style="width:238px"&gt;&lt;img src="Images/SMP-5.jpg" alt="new description" /&gt;&lt;/li&gt;
                  &lt;li style="width:486px"&gt;&lt;img src="Images/SMP-1.jpg" longdesc="" width="486" height="360" alt="Text_5" /&gt;&lt;/li&gt;
  
            &lt;/ul&gt;
              &lt;/p&gt;&lt;div class="clearfix"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="dragger_container"&gt;
  &lt;div class="dragger"&gt;&lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- scroll buttons --&gt;
  &lt;a class="scrollUpBtn" href="#"&gt;&lt;/a&gt; &lt;a class="scrollDownBtn" href="#"&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;noscript&gt;
  &lt;style type="text/css"&gt;
       #mcs5_container .customScrollBox{overflow:auto;}
      #mcs5_container .dragger_container{display:none;}
  &lt;/style&gt;
  &lt;/noscript&gt;
  
  &lt;/div&gt;
  &lt;script&gt;
  $(window).load(function() {
        $("#mcs5_container").mCustomScrollbar("horizontal",500,"easeOutCirc",1,"fixed","yes","yes",20); 
  });
  &lt;/script&gt;
  &lt;script src="jquery.mCustomScrollbar.js" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Here is a link to what I have accomplished thus far: <a href="http://2938.sandbox.i3dthemes.net/index-scroll-w-bar.html" rel="nofollow">http://2938.sandbox.i3dthemes.net/index-scroll-w-bar.html</a> - you can see that everything works and looks the way I want, but the slider bar does not move? </p>
  
  <p>HELP.... please!</p>