slick arrowをslickの外側に設置しよう

稀にですが、スライダーの矢印を両脇ではなく「右上」とか「左下」とかに設置することってありますよね。

そんな時は「appendArrows」でサクッと設定します。

まずhtml

<div class="slider-area">
  <div>スライド1</div>
  <div>スライド2</div>
  <div>スライド3</div>
</div>

<div class="slider-arrows-area">
  <div class="slider-arrows"></div>
</div>

次にJS（jQuery）

$(document).ready(function(){
  $('.slider-area').slick({
    appendArrows: $('.slider-arrows'),
  });
});

これで「.slider-arrows」部分に矢印が設置されます。
あとは任意でcss調整していけば簡単に矢印の設置が可能です！