Как добавить кнопки для слайдера?

Question

viktorulyushev @viktorulyushev

Как добавить кнопки для слайдера?

Есть слайдер

<div class="product-slider">
   <div class="slider-for">
      <div class="slide"><img src="images/content/categories/img-13.jpg" alt="image" /></div>
      <div class="slide"><img src="images/content/mini-product-4.jpg" alt="image" /></div>
      <div class="slide"><img src="images/content/mini-product-2.jpg" alt="image" /></div>
      <div class="slide"><img src="images/content/mini-product-1.jpg" alt="image" /></div>
   </div>
   <div class="slider-nav">
      <div class="slide"><img src="images/content/mini-product-3.jpg" alt="image" /></div>
      <div class="slide"><img src="images/content/mini-product-4.jpg" alt="image" /></div>
      <div class="slide"><img src="images/content/mini-product-2.jpg" alt="image" /></div>
      <div class="slide"><img src="images/content/mini-product-1.jpg" alt="image" /></div>
   </div>
</div>

Из него формируется на странице вот такой код

<div class="product-slider">
   <div class="slider-for slick-initialized slick-slider">
      <button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button" style="display: block;">Previous</button>
      <div aria-live="polite" class="slick-list draggable">
         <div class="slick-track" role="listbox" style="opacity: 1; width: 1018px;">
            <div class="slide slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide10" style="width: 509px; position: relative; left: 0px; top: 0px; z-index: 999; opacity: 1;"><img src="/upload/iblock/352/35270aeb108170574ca0a1af8e46a400.jpg" alt="D15S-5 Фото:1"></div>
            <div class="slide slick-slide" data-slick-index="1" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide11" style="width: 509px; position: relative; left: -509px; top: 0px; z-index: 998; opacity: 0;"><img src="/upload/iblock/dd8/dd84484044161ac5ee2e781b90d45d64.PNG" alt="D15S-5 Фото:2"></div>
         </div>
      </div>
      <button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style="display: block;">Next</button>
   </div>
   <div class="slider-nav slick-initialized slick-slider">
      <div aria-live="polite" class="slick-list draggable">
         <div class="slick-track" role="listbox" style="opacity: 1; width: 262px; transform: translate3d(0px, 0px, 0px);">
            <div class="slide slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide20" style="width: 123px;"><img src="/upload/resize_cache/iblock/352/115_100_2/35270aeb108170574ca0a1af8e46a400.jpg" alt="D15S-5 Превью:1"></div>
            <div class="slide slick-slide slick-active" data-slick-index="1" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide21" style="width: 123px;"><img src="/upload/resize_cache/iblock/dd8/115_100_2/dd84484044161ac5ee2e781b90d45d64.PNG" alt="D15S-5 Превью:2"></div>
         </div>
      </div>
   </div>
</div>

добавляются кнопки для slider-for,мне нужно кнопки добавить еще и для slider-nav
Вот как сам слайдер выглядит

alt="image"/>
В js я не силен,но вот какой код нашел в js

$('.product-slider .slider-for').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: true,
      dots: false,
      fade: true,
      asNavFor: '.product-slider .slider-nav'
    });

    $('.product-slider .slider-nav').slick({
      slidesToShow: 4,
      slidesToScroll: 1,
      asNavFor: '.product-slider .slider-for',
      dots: false,
      arrows: false,
      centerMode: false,
      focusOnSelect: true

    });

Т.е такие же кнопки должны быть и для превьюшек внизу,может как то можно продуюлировать просто?