title: How to execute slickNext method in react-slick carousel?
body: <p>I have the following React app with a Slick carousel. I created a custom Next button and need to execute the <code>slickNext()</code> method to proceed to the next slide. The Slick carousel docs and some of the answers for questions have mentioned the following way to call <code>slickNext()</code> method.</p>
  <p><strong>The problem is I'm getting the error</strong> <code>slider.slick is not a function</code>.</p>
  <p>This is what I have tried so far</p>
  <pre><code>gotoNext = () =&gt; {
      var slider = document.getElementsByClassName(&quot;sliderMain&quot;)[0];
      console.log(&quot;set&quot;, slider)
      slider.slick(&quot;slickNext&quot;);
  }
  
  const SampleNextArrow = (props) =&gt; {
          const { className, style } = props;
          return (
              &lt;div
                  className={className}
                  onClick={this.gotoNext}
              /&gt;
             );
          }
  
      const settings = {
          dots: true,
          infinite: false,
          speed: 500,
          slidesToShow: 1,
          slidesToScroll: 1,
          swipe: false,
          nextArrow: &lt;SampleNextArrow className=&quot;customSlickNext&quot; /&gt;,
      };
  
      &lt;Slider
         id=&quot;sliderMain&quot;
         {...settings}
         className=&quot;sliderMain&quot;
         afterChange={this.changeSlide}
      &gt;{ /* slider goes here */}
      &lt;/Slider&gt;
  </code></pre>
  <p>How can I solve this?</p>