Rotator image visibility

2 posts, 0 answers
  1. Mansi
    Mansi avatar
    63 posts
    Member since:
    Feb 2009

    Posted 03 Oct 2009 Link to this post

    Hi,

    I am using rotator to show 8 images. Below is a sample code. First time when the page loads, it shows all images proper in the rotator.
    But when I press the next or previous buttons, it cuts the image at the start or end.

    This issue is also with Telerik's demo. I have attached it's image. Is there any specific property or any logic to show all images proper every time user clicks the next or previous buttons ?

          <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="LoadingPanel1"
                    Width="560px">
                    <telerik:RadRotator ID="radRotator1" RotatorType="buttons" runat="server" Width="547px"
                        Height="65px" ScrollDuration="100" ItemHeight="60px" ItemWidth="74px" WrapFrames="true">
                        <Items>
                            <telerik:RadRotatorItem>
                                <ItemTemplate>
                                    <asp:ImageButton runat="server" ID="Image" ImageUrl='~/1.jpg'
                                        CssClass="rotImage"  Width="60px" Height="60px"
                                        BorderWidth="1px"   />
                                </ItemTemplate>
                            </telerik:RadRotatorItem>
                            <telerik:RadRotatorItem>
                                <ItemTemplate>
                                    <asp:ImageButton runat="server" ID="Image1" ImageUrl='~/2.jpg'
                                        BorderWidth="1px"  
                                        CssClass="rotImage"  Width="60px" Height="60px" />
                                </ItemTemplate>
                            </telerik:RadRotatorItem>
                            <telerik:RadRotatorItem>
                                <ItemTemplate>
                                    <asp:ImageButton runat="server" ID="Image2" ImageUrl='~/3.jpg'
                                        BorderWidth="1px"  
                                        CssClass="rotImage"  Width="60px" Height="60px" />
                                </ItemTemplate>
                            </telerik:RadRotatorItem>
                            <telerik:RadRotatorItem>
                                <ItemTemplate>
                                    <asp:ImageButton runat="server" ID="Image3" ImageUrl='~/4.jpg'
                                        BorderWidth="1px"  
                                        CssClass="rotImage"  Width="60px" Height="60px" />
                                </ItemTemplate>
                            </telerik:RadRotatorItem>
                            <telerik:RadRotatorItem>
                                <ItemTemplate>
                                    <asp:ImageButton runat="server" ID="Image3" ImageUrl='~/5.jpg'
                                        BorderWidth="1px"  
                                        CssClass="rotImage"  Width="60px" Height="60px" />
                                </ItemTemplate>
                            </telerik:RadRotatorItem>
                            <telerik:RadRotatorItem>
                                <ItemTemplate>
                                    <asp:ImageButton runat="server" ID="Image3" ImageUrl='~/6.jpg'
                                        BorderWidth="1px"  
                                        CssClass="rotImage"  Width="60px" Height="60px" />
                                </ItemTemplate>
                            </telerik:RadRotatorItem>
                            <telerik:RadRotatorItem>
                                <ItemTemplate>
                                    <asp:ImageButton runat="server" ID="Image3" ImageUrl='~/7.jpg'
                                        BorderWidth="1px"  
                                        CssClass="rotImage"  Width="60px" Height="60px" />
                                </ItemTemplate>
                            </telerik:RadRotatorItem>
                            <telerik:RadRotatorItem>
                                <ItemTemplate>
                                    <asp:ImageButton runat="server" ID="Image3" ImageUrl='~/8.jpg'
                                        BorderWidth="1px"  
                                        CssClass="rotImage"  Width="60px" Height="60px" />
                                </ItemTemplate>
                            </telerik:RadRotatorItem>
                        </Items>
                    </telerik:RadRotator>
                </telerik:RadAjaxPanel>
  2. Lini
    Admin
    Lini avatar
    2144 posts

    Posted 07 Oct 2009 Link to this post

    Hello,

    From your code I can see that each rotator item is 74px wide. If you want to see only whole items, then the rotator width must be a multiple of the item width. Also, when you set it, you need to take into account the width of the buttons on each side (20px each). So in your case if you want to show 7 items in the rotator, then its width should be 7*74+40 = 558px.

    Kind regards,
    Lini
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top