Getting Started

27 Oct 20162 minutes to read

This section helps to get started with Essential ReactJS Rotator component.

Create a Rotator

Refer the common React Getting Started Documentation to create an application and add necessary scripts and styles for rendering our ReactJS components.

Create a JSX file and use <EJ.Rotator> syntax to render React Rotator component. Add required properties to <EJ.Rotator> tag element.

  • HTML
  • ReactDOM.render(   
          <EJ.Rotator id="sliderContent" slideWidth="600px" slideHeight={330}>

    Define an HTML element for adding Rotator in the application and refer the JSX file created.

  • HTML
  • <div id="rotator-default"></div>
        <script type="text/babel" src="sample.jsx">

    This will render an empty Rotator component on executing.

    Configure data

    To configure images for Rotator component, define data in an array and map corresponding fields to it.

  • var dataList = [
              { text: "Colorful Night", url: "" },
              { text: "Technology", url: "" },
              { text: "Nature", url: "" },
              { text: "Snow Fall", url: "" },
              { text: "Credit Card", url: "" },
              { text: "Beautiful Bird", url: "" },
              { text: "Amazing Sculptures", url: "" }
            var fieldset={text:"text",url:"url"};

    In the JSX you have to assign the values for dataSource and fields as given below,

  • HTML
  • ReactDOM.render(   
          <EJ.Rotator id="sliderContent" slideWidth="600px" slideHeight={330} fields={fieldset}
            isResponsive={true} dataSource={dataList} navigateSteps={1} orientation={ej.Orientation.Horizontal} 
          showPager={true} enabled={true} showPlayButton={true} animationType="slide">

    Note: You can find the Rotator properties from the API reference document.