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}>
      </EJ.Rotator>,
      document.getElementById('rotator-default')  
    );

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.

JAVASCRIPT

var dataList = [
          { text: "Colorful Night", url: "http://js.syncfusion.com/demos/web/content/images/rotator/night.jpg" },
          { text: "Technology", url: "http://js.syncfusion.com/demos/web/content/images/rotator/tablet.jpg" },
          { text: "Nature", url: "http://js.syncfusion.com/demos/web/content/images/rotator/nature.jpg" },
          { text: "Snow Fall", url: "http://js.syncfusion.com/demos/web/content/images/rotator/snowfall.jpg" },
          { text: "Credit Card", url: "http://js.syncfusion.com/demos/web/content/images/rotator/card.jpg" },
          { text: "Beautiful Bird", url: "http://js.syncfusion.com/demos/web/content/images/rotator/bird.jpg" },
          { text: "Amazing Sculptures", url: "http://js.syncfusion.com/demos/web/content/images/rotator/sculpture.jpg" }
            ];
        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">

      </EJ.Rotator>,

      document.getElementById('rotator-default')  

    );

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