Step 3 of 3: Customizing the Appearance and Behavior

In This Topic

You can easily customize C1Carousel's appearance and behavior. In the following steps you'll set the control's behavior and appearance. The following steps assume you've completed Step 2 of 3: Adding Content to the C1Carousel Control topic.

Complete the following steps:

In Source view, edit the <cc1:C1Carousel> tag so that the Display="2" :
```
<cc1:C1Carousel ID="C1Carousel1" runat="server" Width="750px" Height="300px" Display="2" EnableTheming="True">
```
The control will now display two images at one time.
In Source view, edit the <cc1:C1Carousel> tag to add AutoPlay="True" ShowTimer="True":
```
<cc1:C1Carousel ID="C1Carousel1" runat="server" Width="750px" Height="300px" Display="2" EnableTheming="True" AutoPlay="True" ShowTimer="True">
```
The control will now cycle automatically through images and a progress bar will be displayed showing how much time is left before the image changes to the next.
In Source view, edit the <cc1:C1Carousel> tag to add ShowPager="True" PagerType="Dots":
```
<cc1:C1Carousel ID="C1Carousel1" runat="server" Width="750px" Height="300px" Display="2" EnableTheming="True" AutoPlay="True" ShowTimer="True" ShowPager="True" PagerType="Dots">
```
The control will now display a pager, allowing users to click to any image in the collection. The page will be displayed as dot buttons below the control.
In Source view, edit the <cc1:C1Carousel> tag to add Loop="False":
```
<cc1:C1Carousel ID="C1Carousel1" runat="server" Width="750px" Height="300px" Display="2" EnableTheming="True" AutoPlay="True" ShowTimer="True" ShowPager="True" PagerType="Dots" Loop="False">
```
The control will no longer loop through images, not returning to the first image after the last image in the series is displayed.
Run the application and observe that the control displays the changes that you made:

A pager is displayed below the control and a timer above which changes as images are autoplayed. A pager is displayed in the form of small buttons below the control. The control also does not loop through images.

In this step you customized the appearance and behavior of the controls. Congratulations, you've completed this quick start guide!