title: jquery jcarousel how to add control buttons
body: <p>I am currently working on a site,that uses Sorgilla jquery jcarousel, there are two sliders working together.</p>
  
  <pre><code>var carousel_2;
  jQuery(document).ready(function() {
  jQuery('#right-carousel').jcarousel({
      start: 1, // Configuration goes here
      wrap: "circular",
      scroll: 1,
      auto:3,
      vertical:true,
  
      itemFirstInCallback: {
      onBeforeAnimation: function(carousel, item, index, action) {
          if (carousel_2) {
              carousel_2[action]();
          }
  
  
  
              }
          }
      });
  });
  
  jQuery(document).ready(function() {
  jQuery('#mycarousel').jcarousel({
      start: 3, // Configuration goes here
      wrap: "circular",
      scroll: 1,
      auto:3,
      vertical:false,
      buttonNextHTML: null,
      buttonPrevHTML: null,
      initCallback: function(c) {
      carousel_2 = c;
  }
  });
  </code></pre>
  
  <p>});</p>
  
  <p>This works as it should but I am wondering is it possible to add external controls with the set up I am using. Unfortunately Im quite new to jquery so still learning.</p>
  
  <p>What Im looking to do is add buttons underneath the carousel that behave like pagination, here is an example...
  <a href="http://truelogic.org/multicarousel.php" rel="noreferrer">http://truelogic.org/multicarousel.php</a>
  or <a href="http://www.skyports.com" rel="noreferrer">http://www.skyports.com</a></p>
  
  <p>here is the site im working on 
  <a href="http://hartyinternational.hailstormcommerce.com/" rel="noreferrer">http://hartyinternational.hailstormcommerce.com/</a></p>
  
  <p>Ideally if I could get those pagination buttons working similar to above, itd be great.</p>
  
  <p>I have this css set up underneath the carousel.</p>
  
  <pre><code>.jcarousel-pagination {
  width:100px;
  height:40px;
  position:absolute;
  right:100px;
  bottom:0px;
  background:#000;
  
  }
  
  .jcarousel-pagination a {
  font-size: 75%;
  text-decoration: none;
  padding: 0 5px;
  margin: 0 0 5px 0;
  border: 1px solid #fff;
  color: #eee;
  background-color: #4088b8;
  font-weight: bold; 
  }
  </code></pre>
  
  <p>Here is some documentation... <a href="http://sorgalla.com/projects/jcarousel/" rel="noreferrer">http://sorgalla.com/projects/jcarousel/</a></p>
  
  <p>I was considering adding this code to the function inside <code>initCallback:</code> but unsure how to get it working or how to tell it what button represents what slide...</p>
  
  <pre><code>                jQuery('.jcarousel-pagination a').bind('click', function() {
              carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
              return false;
              });
  </code></pre>
  
  <p>Any help would be great, I know its a bit of a general question, but im not sure where to start
  Thank you.</p>