Images clipped in carousel rotator

[Lisa]

We have a simple rotator with four images.  The control clips the sides of the left and right images (see attached graphic).  Is there some way to bunch the images up closer to avoid the clipping? 

Failing that, is there some formula to know how to size either the images or the rotator to ensure that no clipping will occur, to prevent trial and error testing?  For example, if the rotator is to be 900 pixels how wide can the images be without clipping?

<div style="height: 450px; background-color: #f0f3f6;">
    <asp:Image ImageUrl="~/images/carousel_rt.gif" ID="img_right" AlternateText="right"
        runat="server" Style="cursor: pointer; float: right; margin-top: 180px;" />
    <asp:Image ImageUrl="~/images/carousel_left.gif" ID="img_left" AlternateText="left"
        runat="server" Style="cursor: pointer; float: left; margin-top: 180px;" />
    <telerik:RadRotator ID="radCarousel1" runat="server" Width="900px" ItemWidth="575px"
        Height="430px" ItemHeight="255px" ScrollDuration="1000" FrameDuration="3000"
        RotatorType="CarouselButtons" Style="margin: 0px auto 0px auto;">
        <Items>
            <telerik:RadRotatorItem>
                <ItemTemplate>
                    <img src="images/carouselicount.jpg" />
                </ItemTemplate>
            </telerik:RadRotatorItem>
            <telerik:RadRotatorItem>
                <ItemTemplate>
                    <img src="images/carouselplatform.jpg" />
                </ItemTemplate>
            </telerik:RadRotatorItem>
            <telerik:RadRotatorItem>
                <ItemTemplate>
                    <img src="images/carouselpeople.jpg" />
                </ItemTemplate>
            </telerik:RadRotatorItem>
            <telerik:RadRotatorItem>
                <ItemTemplate>
                    <img src="images/carouselprograms.jpg" />
                </ItemTemplate>
            </telerik:RadRotatorItem>
        </Items>
        <ControlButtons LeftButtonID="img_left" RightButtonID="img_right" />
    </telerik:RadRotator>
</div>

[Slav]

Hi Lisa,

Please check the help article How To Configure Animations. The property xR of the animation client-side object that is show in the article will allow you to control the offset in pixels between the items by setting a smaller value:

<script type="text/javascript">
    var animationOptions = {
        xR: 40 // The offset in pixels between the items in the rotator.
    }

    // The set_scrollAnimationOptions method takes two arguments - the first one is the ClientID of the rotator, which we want to configure and the second one is
    // a hash table with the options we want to apply.
    Telerik.Web.UI.RadRotatorAnimation.set_scrollAnimationOptions("<%= radCarousel1.ClientID %>", animationOptions);
</script>

Feel free to contact us again if you run into more difficulties.

Regards,
Slav
Telerik

[Lisa]

Thank you, that helped a lot!