滑块缩略图导航和缩略图分页

Question

我搜索了很多关于它的但是找不到任何东西。好吧，我需要一个带缩略图导航的滑块，缩略图导航应该有一个分页。我想只显示四个缩略图，但总共有16个，所以我想要缩略图的分页。 https://www.my-main-domain.com/central-image-directory

              <div id="gallery-wrapper">

                <div id="viewer-wrapper">

                    <div id="gallery-viewer">
                        <img alt="Placeholder" src="images/placeholder.png">
                    </div><!-- #gallery-viewer -->

                </div><!-- #viewer-wrapper" -->

                <div id="viewer-nav">
                    <a id="gallery-viewer-next" href="#">next</a>
                    <a id="gallery-viewer-prev" href="#">previous</a>
                </div><!-- #viewer-nav -->

                <div id="thumbs-nav">
                    <a id="gallery-next" href="#">next</a><a id="gallery-prev" href="#">previous</a><p id="gallery-pos">page 1 of 2</p>
                </div>

                <div id="thumbs-wrapper">

                    <div id="gallery">

                        <div class="thumbnail">
                            <img alt="Wasteland" src="gallery/thumbs/wasteland.jpg">
                        </div><!-- .thumbnail -->
                        <div class="thumbnail">
                            <img alt="Woods" src="gallery/thumbs/woods.jpg">
                        </div><!-- .thumbnail -->
                        <div class="thumbnail">
                            <img alt="Tree Path" src="gallery/thumbs/treepath.jpg">
                        </div><!-- .thumbnail -->
                        <div class="thumbnail">
                            <img alt="Cobblestone Road" src="gallery/thumbs/stoneroad.jpg">
                        </div><!-- .thumbnail -->
                        <div class="thumbnail">
                            <img alt="Street" src="gallery/thumbs/street.jpg">
                        </div><!-- .thumbnail -->
                        <div class="thumbnail">
                            <img alt="Tree Path" src="gallery/thumbs/treepath2.jpg">
                        </div><!-- .thumbnail -->
                        <div class="thumbnail">
                            <img alt="Desert" src="gallery/thumbs/desert.jpg">
                        </div><!-- .thumbnail -->
                        <div class="thumbnail">
                            <img alt="Misty Woods" src="gallery/thumbs/mistywoods.jpg">
                        </div><!-- .thumbnail -->
                        <div class="thumbnail">
                            <img alt="Woodsy Stairs" src="gallery/thumbs/woodsystairs.jpg">
                        </div><!-- .thumbnail -->
                        <div class="thumbnail">
                            <img alt="Snowy Trees" src="gallery/thumbs/snowytrees.jpg">
                        </div><!-- .thumbnail -->
                        <div class="thumbnail">
                            <img alt="Street" src="gallery/thumbs/street2.jpg">
                        </div><!-- .thumbnail -->
                        <div class="thumbnail">
                            <img alt="City" src="gallery/thumbs/city.jpg">
                        </div><!-- .thumbnail -->

                    </div><!-- #gallery -->

                </div><!-- #thumbs-wrapper -->

            </div>




<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script type="text/javascript" src="js/jquery.jfollow.js"></script>
        <script type="text/javascript" src="js/jquery.imagesloaded.min.js"></script>
        <script type="text/javascript" src="js/jquery.ImageGallery.js"></script>
        <script type="text/javascript">
            // set up the gallery
            $('#gallery').gallery({
                'rows': 1,
                'cols': 5
            });

            // some extra interface stuff... pay no attention to the man behind the curtain
            var gallery = $('#gallery-wrapper'), setup = $('#setup-wrapper');
            setup.hide();
            $('#show-setup').click(function(){
                gallery.fadeOut(400,function(){
                    setup.fadeIn();
                });
                return false;
            });
            $('#show-gallery').click(function(){
                setup.fadeOut(400,function(){
                    gallery.fadeIn();
                });
                return false;
            });
            $('#nav-wrapper').jfollow('#followbox', 20);
        </script>

我已经尝试了很多，我找到了这个例子：

Please see this image for better understanding of what I want

但我怎样才能创建一个编号分页，如＆＃34; 1,2,3,4,5＆＃34;而不是有前一个或下一个按钮？我无法弄清楚。