ComponentOne Extender Controls for ASP.NET Web Forms
Wijmo Control Toolkit Extender Controls / C1Carousel Extender / Previewing Carousel Content
In This Topic
    Previewing Carousel Content
    In This Topic

    The wijcarousel widget allows users to preview the previous and next content element. Simply set the preview option to take advantage of this feature. See the Carousel > Preview page in the ToolkitExplorer sample for details.

    Complete the following steps to preview carousel content:

    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="200">

    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>

    This markup will add content for a carousel to the page. In the next step, you'll add the extender.

    1.  In Design view, click the Panel1 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 Panel1.
    3. Edit the C1CarouselExtender's markup to set the Preview properties:

    <cc1:C1CarouselExtender ID="Panel1_C1CarouselExtender" runat="server" TargetControlID="Panel1" Preview="true">

    The above markup sets the preview of the carousel.

    What You've Accomplished

    Press F5 to run the application, and notice that the previous and next elements in the carousel are previewed in the carousel widget. Press the Next or Previous buttons to change the current and previewed images.