title: How to Set arrow controls to a custom button
body: <p>I added the <code>react-slick</code> into my project to show a <code>carousel</code>.
  I want to control my slider with custom next and prev button which is in the top of the slider contents. so I followed the custom arrow documentation, but I don't want to show my buttons inside the slick contents, I want to give the controls to the button above the slider contents. How to achieve this? 
  I Included my code from the component I created.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import "slick-carousel/slick/slick.css";
  import "slick-carousel/slick/slick-theme.css";
  import Slider from "react-slick";
  import { styled } from '@material-ui/styles';
  import Button from '@material-ui/core/Button';
  
  function SampleNextArrow(props) {
    const { onClick } = props;
    return (
      &lt;React.Fragment&gt;
        &lt;Button
          onClick={onClick} className="slickRight"&gt;
          Next
        &lt;/Button&gt;
      &lt;/React.Fragment&gt;
    );
  }
  function SamplePrevArrow(props) {
    const { onClick } = props;
    return (
      &lt;React.Fragment&gt;
        &lt;Button
          onClick={onClick} className="slickLeft"&gt;
          Prev
        &lt;/Button&gt;
      &lt;/React.Fragment&gt;
    );
  }
  
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {}
    }
    render() {
      var settings = {
        infinite: true,
        speed: 500,
        slidesToShow: 4,
        slidesToScroll: 1,
        nextArrow: &lt;SampleNextArrow /&gt;,
        prevArrow: &lt;SamplePrevArrow /&gt;,
      };
      return (
        &lt;div&gt;
          {/*Want to Add Control to this Buttons*/
          &lt;Button&gt;Prev&lt;/Button&gt;
          &lt;Button&gt;Next&lt;/Button&gt;
          
          &lt;div className="container"&gt;
            &lt;Slider {...settings}&gt;
              &lt;div&gt;
                &lt;h3&gt;1&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div&gt;
                &lt;h3&gt;2&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div&gt;
                &lt;h3&gt;3&lt;/h3&gt;
              &lt;/div&gt;
            &lt;/Slider&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;</code></pre>
  </div>
  </div>
  </p>