複数設置のslickでオリジナルの矢印アイコンを設置する

複数設置のslickでオリジナルのナビゲーションを設置し、それぞれ別に動かす方法です。

JavaScript

var $sliders = $(".slide_list");
      var $arrows = $('.arrows');

      $(".slick_container").each(function(){
        var $this = $(this);
        var slick = $this.find( $sliders ).slick({
          infinite: true,
          speed: 300,
          slidesToShow: 1,
          slidesToScroll: 1,
          dots: false,
          variableWidth: true,
          focusOnSelect: true,
          appendArrows: $this.find( $arrows )
        });

      });

CSS

.slick_container {
    width:360px;
    margin:0 auto;
    position:relative;
}
/*上書き修正*/
 .slick-prev, .slick-next {
    width:60px;
    height:34px
}
.slick-prev:before, .slick-next:before {
    content:"";
}

HTML

<div class="listBox slick_container">
    <a href="<?php echo get_the_permalink()">
         <div class="slide_list">
<img src="<?php echo $img_src[0]; ?>" alt="" />
<img src="<?php echo $img_src[1]; ?>" alt="" />
<img src="<?php echo $img_src[2]; ?>" alt="" />
          </div>
    </a>
    <div class="arrows">
      <div class="slick-next">
        <img src="next.png" alt="">
      </div>
      <div class="slick-prev">
        <img src="prev.png" alt="">
      </div>
    </div>
  </div>

参考：Multiple carousels on one page with one next prev function #1103 の http://jsfiddle.net/qx05juco/5/