slick carousel arrows for slider-nav
<p>Hello I am trying to use the slider syncing option for Slick, but can't figure out how the prev/next arrows are showing up in the slider-nav section of the carousel. I followed the steps for including the js and css files and copied the javascript within the slider syncing example:</p>

<pre><code> $('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 3,
  slideToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});
</code></pre>

<p>For my HTML I have the following:</p>

<pre><code>&lt;div class="slider-for"&gt;
  &lt;div&gt;
      test 1
  &lt;/div&gt;
  &lt;div&gt;
      test 2
  &lt;/div&gt;
  &lt;div&gt;
      test 3
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class="slider-nav"&gt;
  &lt;div&gt;
    &lt;img src="images/carousel-thumbnails/thumbnail-1.jpg" alt=""/&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;img src="images/carousel-thumbnails/thumbnail-2.jpg" alt=""/&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;img src="images/carousel-thumbnails/thumbnail-3.jpg" alt=""/&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>To clarify, when I inspect the slider syncing example on the Slick website, I see the generated markup for the buttons, but not for my own slick carousel: </p>

<pre><code>&lt;button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button" style="display: block;"&gt;Previous&lt;/button&gt;

&lt;button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style="display: block;"&gt;Next&lt;/button&gt;
</code></pre>