The wijcarousel widget allows users to set a horizontal or vertical orientation. Simply set the orientation option to take advantage of this feature. See the Carousel > Orientation page in the ToolkitExplorer sample for details.

Complete the following steps to set the orientation:

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 set the height and width of each panel:

   <asp:Panel ID="Panel1" runat="server" Height="150" Width="650">

   </asp:Panel>
   <asp:Panel ID="Panel2" runat="server" Width="200" Height="500">
   </asp:Panel>

4. Add images to an unordered list within each panel with the following markup:

<asp:Panel ID="Panel1" runat="server" Height="150" Width="650">

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

<asp:Panel ID="Panel2" runat="server" Width="200" Height="500">

<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 two carousels to the page. In the next step, you'll add the extenders.

5. In Design view, click the Panel1 smart tag and select Add Extender from the Panel Tasks menu.
6. In the Extender Wizard, select C1CarouselExtender and click OK. A C1CarouselExtender control is added to the page and the TargetControlID is set to Panel1.
7. Edit the C1CarouselExtender's markup to set the Display and Step properties:

<cc1:C1CarouselExtender ID="Panel1_C1CarouselExtender" runat="server" Display="3" Step="2" TargetControlID="Panel1">

8. In Design view, click the Panel2 smart tag and select Add Extender from the Panel Tasks menu.
9.  In the Extender Wizard, select C1CarouselExtender and click OK. A C1CarouselExtender control is added to the page and the TargetControlID is set to Panel1.
10. Edit the C1CarouselExtender's markup to set the Display, Step, and Orientation properties:

<cc1:C1CarouselExtender ID="Panel2_C1CarouselExtender" runat="server" Display="3" Orientation="Vertical" Step="2" TargetControlID="Panel2">

The orientation will be set so this carousel will be vertical oriented.

What You've Accomplished

Press F5 to run the application, and notice that the first carousel will be displayed with the default horizontal orientation, the second will be displayed vertically.