title: slick carousel arrows for slider-nav
body: <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>