Adding content to the C1Carousel control is very simple and can be done in a variety of ways. In this step, you'll link to images using the ImageUrl property. The following steps assume you've completed Step 1 of 3: Adding C1Carousel to the Page topic and added a C1Carousel control to the page.

Complete the following steps to add content to the C1Carousel control:

1. In Source view, place your mouse between the <cc1:C1Carousel></cc1:C1Carousel> tags, and add the following markup to add items to the control:

       
   <Items></Items>
           
   

2. Place your mouse between the <Items></Items> tags, and add the following markup to add several C1CarouselItems to the control:

   To Write Code In Source View

   <cc1:C1CarouselItem ID="C1CarouselItem1" runat="server" 
           ImageUrl="http://lorempixum.com/750/300/sports/1" Caption="Sport 1"></cc1:C1CarouselItem>
   
                   <cc1:C1CarouselItem ID="C1CarouselItem2" runat="server" 
           ImageUrl="http://lorempixum.com/750/300/sports/2" Caption="Sport 2">
   </cc1:C1CarouselItem>
   
                   <cc1:C1CarouselItem ID="C1CarouselItem3" runat="server" ImageUrl="http://lorempixum.com/750/300/sports/3" Caption="Sport 3">
   </cc1:C1CarouselItem>
   
                   <cc1:C1CarouselItem ID="C1CarouselItem4" runat="server" ImageUrl="http://lorempixum.com/750/300/sports/4" Caption="Sport 4">
   </cc1:C1CarouselItem>
   
                   <cc1:C1CarouselItem ID="C1CarouselItem5" runat="server" ImageUrl="http://lorempixum.com/750/300/sports/5" Caption="Sport 5">
   </cc1:C1CarouselItem>
   
                   <cc1:C1CarouselItem ID="C1CarouselItem6" runat="server" ImageUrl="http://lorempixum.com/750/300/sports/6" Caption="Sport 6">
   </cc1:C1CarouselItem>
                                   
   
   

   Note that you set the following properties for each C1CarouselItem:

   • ID: Gets or sets the programmatic identifier assigned to the server control.
   • ImageUrl: Image URL of carousel item.
   • Caption: Caption of carousel item.
   
   
3. Run your application, and observe that the page now looks similar to the following image:

   

   Notice that the caption that you added is displayed.

4. Click the Previous and Next buttons to move through the images.

In this step you added content to C1Carousel control. In the next step you'll customize the appearance and behavior of the control.