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