ComponentOne Extender Controls for ASP.NET Web Forms
Wijmo Control Toolkit Extender Controls / C1Carousel Extender / Setting the Carousel Pager Topic
In This Topic
    Setting the Carousel Pager Topic
    In This Topic

    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:

    1. Create a new ASP.NET application.
    2. Navigate to the Toolbox and double-click the standard Panel control to add it to the main content of  your page. Repeat this step to add a second Panel.
    3. Switch to Source view and edit the markup to add a header for each panel and set the height and width of each panel:
      <h3>Numbers</h3>
      <asp:Panel ID="Panel1" runat="server" Height="150" Width="200">
      </asp:Panel>
      <h3>Dots</h3>
      <asp:Panel ID="Panel2" runat="server" Height="150" Width="200">
      </asp:Panel>
      <h3>Slider</h3>
      <asp:Panel ID="Panel3" runat="server" Height="150" Width="200">
      </asp:Panel>
    4.  Add images to an unordered list within each panel with the following markup:

    <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.

    1. Complete the following steps for each Panel:
      1.  In Design view, click the Panel smart tag and select Add Extender from the Panel Tasks menu.
      2. In the Extender Wizard, select C1CarouselExtender and click OK. A C1CarouselExtender control is added to the page and the TargetControlID is set to the Panel.
    2. Edit the first C1CarouselExtender's markup to set the ShowPager and PagerType properties:

    <cc1:C1CarouselExtender ID="Panel1_C1CarouselExtender" runat="server" Display="1" TargetControlID="Panel1" ShowPager="true" PagerType="Numbers"></cc1:C1CarouselExtender>

    1. Edit the second C1CarouselExtender's markup to set the ShowPager and PagerType properties:

      <cc1:C1CarouselExtender ID="Panel2_C1CarouselExtender" runat="server" Display="1" TargetControlID="Panel2" ShowPager="true" PagerType="Dots"></cc1:C1CarouselExtender>

    2. Edit the last C1CarouselExtender's markup to set the ShowPager and PagerType properties:

    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.