Set Pager Style

You can change the pager style of the wijcarousel widget. Simply set the pagerType and pagerPosition options to take advantage of this feature. See the Carousel > Paging sample of the MVC Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/carousel/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():

<h3>Numbers</h3>
<br />
<div id="wijcarousel0">
    <ul class="">
        <li class=""><img alt="1" src="http://lorempixum.com/750/300/sports/1" title="Word" /><span>Word Caption 1</span></li>
        <li class=""><img alt="2" src="http://lorempixum.com/750/300/sports/2" title="Word2" /><span>Word Caption 2</span></li>
        <li class=""><img alt="3" src="http://lorempixum.com/750/300/sports/3" title="Word3" /><span>Word Caption 3</span></li>
        <li class=""><img alt="4" src="http://lorempixum.com/750/300/sports/4" title="Word4" /><span>Word Caption 4</span></li>
        <li class=""><img alt="5" src="http://lorempixum.com/750/300/sports/5" title="Word5" /><span>Word Caption 5</span></li>
    </ul>
</div>
<br />
<h3>Dots</h3>
<br />
<div id="wijcarousel1" class="">
<ul class="">
    <li class=""><img alt="1" src="http://lorempixum.com/750/300/city/1" title="Word" /><span>Word Caption 1</span></li>
    <li class=""><img alt="2" src="http://lorempixum.com/750/300/city/2" title="Word2" /><span>Word Caption 2</span></li>
    <li class=""><img alt="3" src="http://lorempixum.com/750/300/city/3" title="Word3" /><span>Word Caption 3</span></li>
    <li class=""><img alt="4" src="http://lorempixum.com/750/300/city/4" title="Word4" /><span>Word Caption 4</span></li>
    <li class=""><img alt="5" src="http://lorempixum.com/750/300/city/5" title="Word5" /><span>Word Caption 5</span></li>
</ul>
</div>
<br />
<h3>Slider</h3>
<br />
<div id="wijcarousel2" class="">
<ul class="">
    <li class=""><img alt="1" src="http://lorempixum.com/750/300/abstract/1" title="Word" /><span>Word Caption 1</span></li>
    <li class=""><img alt="2" src="http://lorempixum.com/750/300/abstract/2" title="Word2" /><span>Word Caption 2</span></li>
    <li class=""><img alt="3" src="http://lorempixum.com/750/300/abstract/3" title="Word3" /><span>Word Caption 3</span></li>
    <li class=""><img alt="4" src="http://lorempixum.com/750/300/abstract/4" title="Word4" /><span>Word Caption 4</span></li>
    <li class=""><img alt="5" src="http://lorempixum.com/750/300/abstract/5" title="Word5" /><span>Word Caption 5</span></li>
</ul>
</div>

This markup will add content for three carousel widgets to the page.

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

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
    var options = {
    display: 1,
    showTimer: false,
    showPager: true,
    buttonOffset: 16,
    pagerType: "numbers"
    };
    $("#wijcarousel0").wijcarousel(options);
    $("#wijcarousel1").wijcarousel($.extend(options, {
    pagerType: "dots",
    pagerPosition: {
        my: "center top",
        at: "center bottom",
        offset: "0 5"
    },
    start: 2
    }));
    $("#wijcarousel2").wijcarousel($.extend(options, {
    pagerType: "slider",
    loop: false,
    pagerPosition: {
        my: "center top",
        at: "center bottom"
    },
    start: 3
    }));
    });
</script>
<style type="text/css">
    #wijcarousel0, #wijcarousel1, #wijcarousel2
    {
    width: 750px;
    height: 300px;
    }
</style>

Each of the three carousels will use a different pager style.

What You've Accomplished

Press F5 to run the application, and notice that each of the three carousels use a different pager style: numbers, dots, and a slider.