JQuery Карусель нумерация страниц?

Question

Я создаю jquery карусель для видео галереи. Мне нужно создать нумерацию страниц для этого. Я уже создал это, но это не общий сценарий для разбивки на страницы. Я жестко закодировал объект Pagination в сценарии. Я хочу сделать это родовым, чтобы я мог использовать это несколько раз на одной странице. даже не в состоянии получить доступ к целевому объекту карусели.

Для E.g

Всего 12 штук Пункт прокрутки: - 3 за раз Нумерация страниц - 1,2,3,4 (4 x 3 = 12)

Если кто-то может помочь мне в этом. Заранее спасибо

Источник http://sorgalla.com/jcarousel/

вот код

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

Этот скрипт, создающий нумерацию страниц

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;
                        })
                    });
            }

Вот 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

Вот скрипт для нумерации страниц

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))
                                }
                            })
                        });
                },