title: How can I insert the <carousel> element into react.js
body: <p>I am writing an website, which is based on react.js. I want the background image slide automatically in my index page and I import the element {carousel} from <a href="https://github.com/ant-design/ant-design/blob/master/components/carousel/demo/autoplay.md" rel="nofollow noreferrer">Ant Design</a>, which has the implementation of how to use <code>carousel</code>. I have the code which will route to every component. Now, I am wondering how can I insert the {carousel} into the index page. I have the following code:</p>
  
  <pre><code>/* eslint no-unused-vars: "off" */
  
  import React from 'react';
  import { render } from 'react-dom';
  import { Router, Route, browserHistory } from 'react-router'
  
  import Root from './Root/Root'
  import MainLayout from './MainLayout/MainLayout'
  import MyRoot from './MyRoot/MyRoot'
  import CreateNew from './CreateNew/CreateNew'
  import './index.css'
  import { Carousel } from 'antd';
  
  // see https://github.com/ReactTraining/react-router
  render((
  
    // &lt;Carousel autoplay&gt;
    //   &lt;div&gt;&lt;image&gt;1&lt;/image&gt;&lt;/div&gt;
    //   &lt;div&gt;&lt;image&gt;2&lt;/image&gt;&lt;/div&gt;
    //   &lt;div&gt;&lt;image&gt;3&lt;/image&gt;&lt;/div&gt;
    //   &lt;div&gt;&lt;image&gt;4&lt;/image&gt;&lt;/div&gt;
    // &lt;/Carousel&gt;, mountNode;
  
    &lt;Router history={browserHistory}&gt;
      &lt;Route component={MainLayout}&gt;
        &lt;Route path="/" component={Root}/&gt;
        &lt;Route path="/myitinerary" component={MyRoot}/&gt;
        &lt;Route path="/createnew" component={CreateNew}/&gt;
      &lt;/Route&gt;
    &lt;/Router&gt;
  ), document.getElementById('root'));
  </code></pre>
  
  <p>Honestly, I have no idea why I did this, I am just guessing. Or do I need to create another component to hold the carousel information? Or is there any other easy-understand way to do this. Thank you so much!</p>