Rotator image visibility

[Mansi]

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>

[Lini]

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.