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 page in the ToolkitExplorer sample for details.
Complete the following steps to set the pager type:
<h3>Numbers</h3>
<asp:Panel ID="Panel1" runat="server" Height="150" Width="200">
<ul class="">
<li class=""><img alt="1" src="http://lorempixum.com/200/150/abstract/1" title="Abstract1" /><span>Abstract Image 1</span></li>
<li class=""><img alt="2" src="http://lorempixum.com/200/150/abstract/2" title="Abstract2" /><span>Abstract Image 2</span></li>
<li class=""><img alt="3" src="http://lorempixum.com/200/150/abstract/3" title="Abstract3" /><span>Abstract Image 3</span></li>
<li class=""><img alt="4" src="http://lorempixum.com/200/150/abstract/4" title="Abstract4" /><span>Abstract Image 4</span></li>
<li class=""><img alt="5" src="http://lorempixum.com/200/150/abstract/5" title="Abstract5" /><span>Abstract Image 5</span></li>
<li class=""><img alt="1" src="http://lorempixum.com/200/150/abstract/6" title="Abstract6" /><span>Abstract Image 6</span></li>
</ul>
</asp:Panel>
<h3>Dots</h3>
<asp:Panel ID="Panel2" runat="server" Height="150" Width="200">
<ul class="">
<li class=""><img alt="1" src="http://lorempixum.com/200/150/abstract/1" title="Abstract1" /><span>Abstract Image 1</span></li>
<li class=""><img alt="2" src="http://lorempixum.com/200/150/abstract/2" title="Abstract2" /><span>Abstract Image 2</span></li>
<li class=""><img alt="3" src="http://lorempixum.com/200/150/abstract/3" title="Abstract3" /><span>Abstract Image 3</span></li>
<li class=""><img alt="4" src="http://lorempixum.com/200/150/abstract/4" title="Abstract4" /><span>Abstract Image 4</span></li>
<li class=""><img alt="5" src="http://lorempixum.com/200/150/abstract/5" title="Abstract5" /><span>Abstract Image 5</span></li>
<li class=""><img alt="1" src="http://lorempixum.com/200/150/abstract/6" title="Abstract6" /><span>Abstract Image 6</span></li>
</ul>
</asp:Panel>
<h3>Slider</h3>
<asp:Panel ID="Panel3" runat="server" Height="150" Width="200">
<ul class="">
<li class=""><img alt="1" src="http://lorempixum.com/200/150/abstract/1" title="Abstract1" /><span>Abstract Image 1</span></li>
<li class=""><img alt="2" src="http://lorempixum.com/200/150/abstract/2" title="Abstract2" /><span>Abstract Image 2</span></li>
<li class=""><img alt="3" src="http://lorempixum.com/200/150/abstract/3" title="Abstract3" /><span>Abstract Image 3</span></li>
<li class=""><img alt="4" src="http://lorempixum.com/200/150/abstract/4" title="Abstract4" /><span>Abstract Image 4</span></li>
<li class=""><img alt="5" src="http://lorempixum.com/200/150/abstract/5" title="Abstract5" /><span>Abstract Image 5</span></li>
<li class=""><img alt="1" src="http://lorempixum.com/200/150/abstract/6" title="Abstract6" /><span>Abstract Image 6</span></li>
</ul>
</asp:Panel>
This markup will add content for three carousels to the page. In the next step, you'll add the extenders.
<cc1:C1CarouselExtender ID="Panel1_C1CarouselExtender" runat="server" Display="1" TargetControlID="Panel1" ShowPager="true" PagerType="Numbers"></cc1:C1CarouselExtender>
<cc1:C1CarouselExtender ID="Panel2_C1CarouselExtender" runat="server" Display="1" TargetControlID="Panel2" ShowPager="true" PagerType="Dots"></cc1:C1CarouselExtender>
class="NewStyle2"> <cc1:C1CarouselExtender ID="Panel3_C1CarouselExtender" runat="server" Display="1" TargetControlID="Panel3" ShowPager="true" PagerType="Slider"></cc1:C1CarouselExtender>
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. You can click on each of the pagers to move to another item in the carousel.