nextArrow

"次へ"の矢印をDOMノードや、カスタムHTMLで変更することができます。

• 初期値 : <button type="button" class="slick-next">Next</button>
• type : html、jQuery Selector、object(DOMノード、jQuery Object)

$('.slider').slick({
  nextArrow: '<button type="button" class="slick-next">Next</button>',
});

デモ

ナビゲーション用矢印を"<"、">"に変更しています。

JavaScript

$(document).ready(function(){
  $('.slider').slick({
    prevArrow: '<span class="prev-arrow">&lt;</span>',
    nextArrow: '<span class="next-arrow">&gt;</span>',
  });
});

HTML

<div class="slider">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

CSS

/* 矢印用スタイル */
.prev-arrow,
.next-arrow {
  position: absolute;
  top: 50%;
  margin: 0;
  padding: 0;
  line-height: 1;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  cursor: pointer;
  font-weight: bold;
}

.prev-arrow {
  left: -20px;
}

.next-arrow {
  right: -20px;
}
/* ここまで */

.slick-prev:before,
.slick-next:before {
  color: #000 !important;
}

.slider p {
  font-size: 2rem;
  font-weight: bold;
  line-height: 100px;
  color: #666;
  margin: 10px;
  text-align: center;
  background-color: #e0e0e0;
}