title: jQuery carousel pagination?
body: <p>I am creating jquery carousel for video gallery. I need to create a pagination for this.
  I have already created this but that is not genric script for pagination I have hard coded the Pagination object in script. I want to make it genric so that i can use this multiple time on same page. even not able to access the target object of carousel. </p>
  
  <p>For E.g</p>
  
  <p>Total Item is 12
  Scroll Item :- 3 at time 
  Pagination shoul be - 1, 2,3,4 (4 x 3 =12)</p>
  
  <p>If someone can help me on this.
  Thanks in advance</p>
  
  <p>Source
  <a href="http://sorgalla.com/jcarousel/" rel="nofollow noreferrer">http://sorgalla.com/jcarousel/</a></p>
  
  <p>here is code</p>
  
  <pre><code>Script for init jquery carosuel
              slidingCarosuel:function(getElements,paginationNum){
                  var myCarousel=jQuery(getElements);
                  if (myCarousel) {
                      jQuery(myCarousel).jcarousel({
                          scroll: paginationNum,
                          initCallback:clasohlson.carosuelPagination
                      });
                  }
              }
  </code></pre>
  
  <p>This script creating pagination</p>
  
  <pre><code>carosuelPagination:function(carousel) {
                      _scrolls=carousel.options.scroll;
                      carousel.options.scroll = jQuery.jcarousel.intval(_scrolls);
                      var noLi = carousel.options.size;
                      var requiredLi = Math.ceil(noLi / _scrolls);
                      for (var i = 0; i &lt; requiredLi; i++) {
                          var count = i + 1;
                          var liSrting = "&lt;li&gt;" + count + "&lt;/li&gt;";
                          $(".hmPagination").append(liSrting);
                      }
                      if (noLi &lt;= _scrolls) {
                          $(".hmPagination").hide();
                          $(".jcarousel-prev").hide();
                          $(".jcarousel-next").hide();
                      }
                      else {
                          //$(".hmPagination").show().text("");
                          $(".jcarousel-prev").show();
                          $(".jcarousel-next").show();
                      }
                      $(".hmPagination").children(":first").addClass("selected");
                      $(".jcarousel-next").click(function() {
                          $(".hmPagination").find("li.selected").next().addClass("selected");
                          $(".hmPagination").find("li.selected:last").prev().removeClass("selected");
                      })
                      $(".jcarousel-prev").click(function() {
                          $(".hmPagination").find("li.selected:last").prev().addClass("selected");
                          $(".hmPagination li.selected").next().removeClass("selected")
                      })
                      $('.hmPagination li').each(function() {
                          $(this).bind("click", function() {
                              $('.hmPagination li').removeClass("selected");
                              $(this).addClass("selected");
                              var noClick = parseInt($(this).text());
                              var remain = noLi % 1;
                              if ($(this).text() == "1") {
                                  carousel.scroll(jQuery.jcarousel.intval(1))
                              }
                              if (remain == 0) {
                                  var ulLi = $("ul.pagination li").length
                                  var scrollNo = ((noClick - 1) * 1) + 1
                                  carousel.scroll(jQuery.jcarousel.intval(scrollNo))
                              } else {
                                  var scrollNo = ((noClick - 1) * 1) + 1
                                  carousel.scroll(jQuery.jcarousel.intval(scrollNo))
                              }
                              //carousel.scroll(jQuery.jcarousel.intval(firstItem));
                              // return false;
                          })
                      });
              }
  </code></pre>
  
  <p>Here is Html </p>
  
  <pre><code>&lt;ul class="carosuelList"&gt;
                                                              &lt;li&gt;
                                                                  &lt;img src="images/products/thumbnail-video.jpg" alt="article video"  /&gt;
                                                              &lt;/li&gt;
                                                              &lt;li&gt;
                                                                  &lt;img src="images/products/thumbnail-video.jpg" alt="article video"  /&gt;
                                                              &lt;/li&gt;
                                                              &lt;li&gt;
                                                                  &lt;img src="images/products/thumbnail-video.jpg" alt="article video"  /&gt;
                                                              &lt;/li&gt;
                                                              &lt;li&gt;
                                                                  &lt;img src="images/products/thumbnail-video.jpg" alt="article video"  /&gt;
                                                              &lt;/li&gt;
                                                          &lt;/ul&gt;
                                                          &lt;ul class="hmPagination"&gt;&lt;li&gt;&lt;/li&gt;&lt;/ul&gt;
  </code></pre>