jQuery pagination carosuel?

Question

Bonjour, je crée jquery carosuel pour la galerie vidéo. Je dois créer une pagination pour cela. J'ai déjà créé ceci mais ce n'est pas un script générique pour la pagination J'ai codé en dur l'objet Pagination dans le script. Je veux le rendre générique afin que je puisse l'utiliser plusieurs fois sur la même page. même pas en mesure d'accéder à l'objet cible de carosuel.

Pour exemple

total 12 L'article est Scroll Point: - 3 au moment Pagination shoul soit - 1, 2,3,4 (4 x 3 = 12)

Si quelqu'un peut me aider sur ce. Merci à l'avance

Source http://sorgalla.com/jcarousel/

ici est le code

Script for init jquery carosuel 
      slidingCarosuel:function(getElements,paginationNum){ 
       var myCarousel=jQuery(getElements); 
       if (myCarousel) { 
        jQuery(myCarousel).jcarousel({ 
         scroll: paginationNum, 
         initCallback:clasohlson.carosuelPagination 
        }); 
       } 
      } 

Ce script créer pagination

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 < requiredLi; i++) { 
         var count = i + 1; 
         var liSrting = "<li>" + count + "</li>"; 
         $(".hmPagination").append(liSrting); 
        } 
        if (noLi <= _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; 
         }) 
        }); 
      } 

Voici ce Html

<ul class="carosuelList"> 
                  <li> 
                   <img src="images/products/thumbnail-video.jpg" alt="article video" /> 
                  </li> 
                  <li> 
                   <img src="images/products/thumbnail-video.jpg" alt="article video" /> 
                  </li> 
                  <li> 
                   <img src="images/products/thumbnail-video.jpg" alt="article video" /> 
                  </li> 
                  <li> 
                   <img src="images/products/thumbnail-video.jpg" alt="article video" /> 
                  </li> 
                 </ul> 
                 <ul class="hmPagination"><li></li></ul> 

Answer 1

est ici script pour faire en page

carosuelPagination:function(carousel) { 
         tempVar=carousel.list[0]; 
         idx=jQuery(tempVar).attr("id"); 
         _scrolls=carousel.options.scroll; 
         carousel.options.scroll = jQuery.jcarousel.intval(_scrolls); 
         pagination='<ul class="pagination"></ul>'; 
         var noLi = carousel.options.size; 
         jQuery("#"+idx).parents(".smallCarosuelbox").append(pagination); 
         p=jQuery("#"+idx).parents(".smallCarosuelbox").find(".pagination"); 
         var requiredLi = Math.ceil(noLi/_scrolls); 
         for (var i = 0; i < requiredLi; i++) { 
          var count = i + 1; 
          var liSrting = "<li>" + count + "</li>"; 
          p.append(liSrting+""); 
         } 
         if (noLi <= _scrolls) { 
          p.hide(); 
          $(".jcarousel-prev,.jcarousel-next").hide(); 
         } 
         else { 
          $(".jcarousel-prev,.jcarousel-next").show(); 
         } 
         p.find("li:first").addClass("selected"); 
         p.find('li').each(function() { 
          $(this).bind("click", function(e) { 
           jQuery(e.target).parent().find('li').removeClass("selected"); 
           $(this).addClass("selected"); 
           var noClick = parseInt($(this).text()); 
           var remain = noLi % _scrolls; 
           if ($(this).text() == "1") { 
            carousel.scroll(jQuery.jcarousel.intval(1)) 
           } 
           if (remain == 0) { 
            var ulLi = $("ul.pagination li").length 
            var scrollNo = ((noClick - 1) * _scrolls) + 1 
            carousel.scroll(jQuery.jcarousel.intval(scrollNo)) 
           } else { 
            var scrollNo = ((noClick - 1) * _scrolls) + 1 
            carousel.scroll(jQuery.jcarousel.intval(scrollNo)) 
           } 
          }) 
         }); 
       },