button inside

[Kjell]

How to set the button inside the rotator?

[Shinu]

Hi,

You can set RotatorType to show buttons in rotator. Check the following demo which explains the same.
Rotator / Rotator Types

Thanks,
Shinu

[Kjell]

As the attached image. Buttons (own pictures) and the buttons inside / above banner / image

[Shinu]

Hi,

Try overriding the default CSS as shown below.
CSS:

.rrButton.rrButtonRight
       {
           right: 0px !important;
       }

       .rrButton.rrButtonLeft
       {
           left: 5px !important;
       }

Thanks,
Shinu

[Kjell]

And how do i define/link my own button image

[Slav]

Hello Kjell,

The easiest way to specify custom control buttons for the RadRotator control is through its inner property ControlButtons, as shown in this help article. You can check it in action in the following demos:
 - Rotator / Thumb Scroller;
 - Rotator / Slide Show;

Regards,
Slav
the Telerik team

[Shinu]

Hi,

Try the following CSS.
CSS:

.RadRotator_Default .rrButton
{
 background-image: url("Images/img.jpg") !important ;
 }

Thanks,
Shinu

[Kjell]

Does not work
And I need to link the left and right buttons...

[Shinu]

Hi,

Try the following CSS.

CSS:

<style type="text/css">
    .rrButton.rrButtonRight
    {
        right: 0px !important;
        background-image: url("../Images/image1.jpg") !important;
    }
    .rrButton.rrButtonLeft
    {
        left: 0px !important;
        background-image: url("../Images/image2.jpg") !important;
    }
</style>

Regards,
Shinu.

[Kjell]

Nothing happens, below my code ....
The test url: http://www.junis.net/xdefault.aspx

<telerik:RadRotator ID="RadRotator1" skin="Simple" DataSourceID="xmlDataSource1" Width="1000px" ItemWidth="960px" Height="350px" ItemHeight="350px" RotatorType="Buttons" EnableDragScrolling="True" ScrollDuration="700" runat="server">
  <ItemTemplate>
    <div class="itemTemplate">
      <asp:HyperLink ID="imgBanner" ImageUrl='<%# "~/banner/images/" + XPath("Image") %>' NavigateUrl='<%# XPath("Url") %>' target="_blank" ToolTip='<%# XPath("Alt") %>' BorderWidth="0" BorderStyle="none" runat="server" />
    </div>
  </ItemTemplate>
</telerik:RadRotator>

.rrButton.rrButtonRight
{
    right: 10px !important;
    background-image: url(../picture/Rotator/right.png);
}

.rrButton.rrButtonLeft
{
    left: 10px !important;
    background-image: url(../picture/Rotator/left.png);
}

.rrClipRegion
{
    border: 0px !important;
}

[Slav]

Hello Kjell,

The RadRotator is designed to use a sprite image for defining the appearance of the control buttons. If you want to change the buttons by customizing the skin of the rotator, you need to follow the steps in this help article and create a new sprite from an existing one by keeping its original size. Any change of the sprite's size would require modifications in the rotator's skin to adjust the background position.

Another possible approach is to use the ControlButtons inner property of the control to customize the buttons, which I already suggested in my previous post.

All the best,
Slav
the Telerik team