Set the Gallery Pager

You can add a pager and change the pager style of the wijgallery widget. Simply set the pagerType and pagerPosition options to take advantage of this feature. See the Gallery > Paging sample of the MVC Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/gallery/Paging for an example.

Complete the following steps to set the pager type:

Create a new C1 ASP.NET MVC 5 Web Application (see Creating an MVC Classic Project).
Navigate to the Solution Explorer, expand the Shared folder inside the Views folder, and double-click _Layout to open the file.

Add the following markup within the <body> tags of the page, just after @RenderBody():

<div>
    <div id="wijgallery" class="">
        <ul class="">
            <li class=""><a href="http://lorempixum.com/750/300/sports/1">
                <img alt="1" src="http://lorempixum.com/200/150/sports/1" title="Word Caption 1" />
            </a></li>
            <li class=""><a href="http://lorempixum.com/750/300/sports/2">
                <img alt="2" src="http://lorempixum.com/200/150/sports/2" title="Word Caption 2" />
            </a></li>
            <li class=""><a href="http://lorempixum.com/750/300/sports/3">
                <img alt="3" src="http://lorempixum.com/200/150/sports/3" title="Word Caption 3" />
            </a></li>
            <li class=""><a href="http://lorempixum.com/750/300/sports/4">
                <img alt="4" src="http://lorempixum.com/200/150/sports/4" title="Word Caption 4" />
            </a></li>
            <li class=""><a href="http://lorempixum.com/750/300/sports/5">
                <img alt="5" src="http://lorempixum.com/200/150/sports/5" title="Word Caption 5" />
            </a></li>
            <li class=""><a href="http://lorempixum.com/750/300/sports/6">
                <img alt="6" src="http://lorempixum.com/200/150/sports/6" title="Word Caption 6" />
            </a></li>
            <li class=""><a href="http://lorempixum.com/750/300/sports/7">
                <img alt="7" src="http://lorempixum.com/200/150/sports/7" title="Word Caption 7" />
            </a></li>
            <li class=""><a href="http://lorempixum.com/750/300/sports/8">
                <img alt="8" src="http://lorempixum.com/200/150/sports/8" title="Word Caption 8" />
            </a></li>
            <li class=""><a href="http://lorempixum.com/750/300/sports/9">
                <img alt="9" src="http://lorempixum.com/200/150/sports/9" title="Word Caption 9" />
            </a></li>
            <li class=""><a href="http://lorempixum.com/750/300/sports/10">
                <img alt="10" src="http://lorempixum.com/200/150/sports/10" title="Word Caption 10" />
            </a></li>
        </ul>
    </div>
</div>

This markup will add content for a gallery widget to the page.

After the closing </div> tag you added in the previous step, enter the following jQuery script to initialize the wijgallery widget:

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#wijgallery").wijgallery({
            showPager: true,
            showCounter: false
        });
    });
</script>
<style type="text/css">
    .wijmo-wijcarousel-text span
    {
        padding: 5px;
    }
    #wijgallery
    {
        width: 750px;
        height: 300px;
    }
</style>

The gallery will use a numeric pager style.

What You've Accomplished

Press F5 to run the application, and notice that the gallery uses a numeric pager style.