Images clipped in carousel rotator

3 posts, 1 answers
  1. Lisa
    Lisa avatar
    8 posts
    Member since:
    Oct 2012

    Posted 13 Aug 2013 Link to this post

    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>
  2. Answer
    Slav
    Admin
    Slav avatar
    1355 posts

    Posted 15 Aug 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Lisa
    Lisa avatar
    8 posts
    Member since:
    Oct 2012

    Posted 15 Aug 2013 Link to this post

    Thank you, that helped a lot!
Back to Top