Getting Started

14 Oct 20152 minutes to read

Create your first Rotator in ASP.NET

ASP.NET Image Rotator comes with a visual that has a spectacular zoom in and fade out effect. A single line of code invokes the Rotator effect. By using the following guidelines, you can create Rotator control for a real-time website banner. It has five images that slide automatically. When you click the center button, image slides in a rotating manner and on second click the rotation stops.

Create a Rotator

You can create an ASP.NET Project and add the necessary Dll’s and scripts with the help of the given  ASP.NET -Getting Started Documentation.

Add the following code example to the corresponding ASPX page to render the Rotator. Place the images under the folder/Images/rotator.

  • HTML
  • <div class="frame">
        <ej:Rotator ID="RotatorContent" SlideWidth="600px" SlideHeight="350px" ShowPlayButton="true" runat="server">
                <ej:rotatoritem url="/images/rotator/EssentialJS.png">
                <ej:rotatoritem url="/images/rotator/EssentialStudio.png">
                <ej:rotatoritem url="/images/rotator/EnterpriseEdition.png">
                <ej:rotatoritem url="/images/rotator/BusinessIntelligence.png">
                <ej:rotatoritem url="/images/rotator/WinRT.png">

      Add the following styles to the corresponding view page.

  • CSS
  • .frame {
            width: 600px;
        #RotatorContent > li img {
            width: 610px;

      The following banner is displayed as output.