Automatic rotator with paging buttons

[Dave]

How do I create a rotator similar to the one on this homepage?

I've tried so many different methods from the documentation and forum but none seem to work the same as the above.

Basically, I have 4 big buttons with text in them that are meant to control the sliding rotator (button 1 skips to rotator frame 1 and pauses, button 3 skips to rotator frame 3 and pauses, etc.) when the mouse is not hovering over a button or rotator frame, the rotator is cycling through the 4 frames every 6 seconds.

I think the reason I'm finding it difficult is because I also want the button's css class to change to ButtonOn when either the mouse is hovered over it or the rotator is on the frame corresponding to it. The rest of the time the class should be ButtonOff.

Any suggestions anyone? Cheers!

[Svetlina Anati]

Hi Dave,

 I am glad to inform you that in the latest release you can now achieve what you require by using the new set_currentItemIndex method. Furthermore, there is an online demo which is very similar to what you need below:

http://demos.telerik.com/aspnet-ajax/rotator/examples/pagerintegration/defaultcs.aspx

I hope that my reply is helpful, let me know how it goes and in case you have additional questions.

Greetings,
Svetlina
the Telerik team

[Dave]

Thanks this works great.

There was a problem: When placing the rotator, buttons and RadCodeBlock in to an asp:Content control the buttons stopped working. The reason being that the button ID referenced in the javascript was rewritten server-side. If anybody else has this problem the solution is to change the line in the javascript example from:

var buttonIdSelector = String.format("#Button{0}:first", index);

To:

var buttonIdSelector = String.format("yourContentPlaceHolderID_Button{0}:first", index);

[Svetlina Anati]

Hello Dave,

I am glad I could help. The reason for the behavior you describe is that a MasterPage is an INaming Container and thus it changes the IDs of the content controls. This is general ASP.NET knowledge and how the things work and it is not directly related to RadControls.

What I can recommend is to use the ClientID property to dynamically evaluate the ID instead of hard-coding it - both manners will work but dynamic evaluation is more elegant solution because it will also work if you change IDs or structure in the future.

More information about INaming Containers is available below:

http://msdn.microsoft.com/en-us/library/system.web.ui.inamingcontainer.aspx

Best wishes,
Svetlina
the Telerik team

[Jaime Weise]

Slide In with the images
Here is a little code that will get a slightly different effect. I worked this out before realizing that there was a fix for the Rotator.

<style type="text/css">

 

    ul.rrClipRegion, ul.rrItemsList LI

    {

        float:none !important;

    }

   .horizontalRotator, .rrClipRegion,  .rrItemsList, .rrRelativeWrapper

   {

       height:auto !important;

   }

     

     

</style>

<script type="text/javascript">

 

    var currentItemIndex;

    var rotatorCount;

 

    function showing(sender, e) {

              // update the currentItemIndex 

        switch (sender._animationDirection) {

            case 1:

                currentItemIndex--;

                currentItemIndex = (currentItemIndex + rotatorCount) % rotatorCount;

                break;

 

            case 2:

                currentItemIndex++;

                currentItemIndex = currentItemIndex % rotatorCount;

 

                break;

            default:
      // initialize the currentItemIndex

                currentItemIndex = 0

 

                break;

        }
   // clear slides

        for (var i = 0; i < rotatorCount; i++) {

            sender._items[i]._element.style.display = "none";

        }
   // Show the correct slide.

        sender._items[currentItemIndex]._element.style.display = "block";

    }

 

    function goToSlide(index) {

        var rotator = Sys.Application.findComponent('<%# RadRotator1.ClientID %>');

        var clicks = (index % rotatorCount) - (currentItemIndex % rotatorCount);

        if (clicks < 0) {

 
// move to the right.

            clicks = Math.abs(clicks)

            for (var i = 0; i < clicks; i++) {

                rotator._rightButton.click()

            }

        }

        else {
// move to the left.

            for (var i = 0; i < clicks; i++) {

                rotator._leftButton.click()

            }

         

        }

 

    }

 

    function rotatorLoaded(sender, e) {

 

        rotatorCount = sender._items.length;
   // set the initial slide.

        showing(sender, e);

    }

</script>

        <asp:ImageButton ID="LeftButton" runat="server"

                 ImageUrl="/Images/slide-menu/left-arrow.jpg" />

<asp:ImageButton ID="RightButton" runat="server"

                 ImageUrl="/Images/slide-menu/right-arrow.jpg" />

 

<telerik:RadRotator ID="RadRotator1" runat="server" CssClass="horizontalRotator"

    ScrollDuration="200" Width="760" ItemWidth="760" RotatorType="Buttons" OnClientLoad="rotatorLoaded"

    OnClientItemShowing="showing">

    <ControlButtons LeftButtonID="RightButton" RightButtonID="LeftButton" />

        <ItemTemplate>
// Add your own data or create some items instead of the template.

            <%# Container.DataItem %>

        </ItemTemplate>

</telerik:RadRotator>

[Svetlina Anati]

Hi jaime,

 Thank you for sharing your solution with others. A quick recommendation which will make the code better is to always use public getters and setters where possible e.g


sender._items[currentItemIndex]._element.style.display = "block";

should become

sender.get_items()[currentItemIndex].get_element().style.display = "block";

In this manner if we fix some bug in the control it will be available in your code after upgrade as well. Furthermore, sometimes there is additional logic in those setters and getters and not only setting the value of the private property.

Greetings,
Svetlina
the Telerik team