【jQuery】slickのarrows,dotsのカスタマイズ

※ 当サイトではアフィリエイト広告を利用しています。

万能スライダー、slick。
オプション設定でいろんなアレンジが簡単にできてとっても使い勝手がいいですよね。

コーディング案件の中でよくあるのが、arrows やdots部分をオリジナルデザインに変更したもの。変更に必要なことを自分が一番簡単と思う方法でまとめてみました。

サンプル例はこちらから。

arrows　のカスタマイズ

arrowsのデフォルトのアイコンを使って色・サイズを変更する

DLしたファイルに添付されているアイコンをarrowsとして使いたい場合は、slick-theme.css と同じフォルダ内に、fontsフォルダを収納します。

デフォルトのコードはこちら。（slick-theme.css)

.slick-prev:before,
.slick-next:before{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

色や大きさを変更したいなら、これだけを自分のstyle.cssに書き込めばOKです。（一例です。）

.slick-prev::before,
.slick-next::before{
  color:#000;
  font-size:30px;
}

arrowsの位置を変更する場合

デフォルトのコードはこちら。（スライダーの外）

.slick-next {
  right: -25px;
}
.slick-prev {
  left: -25px;
}

変更例。マイナスだとスライダーの外側、プラスの値だとスライダーの内側に表示されます。

.slick-next {
  right: 25px;
}
.slick-prev {
  left: 25px;
}

arrowsのアイコン自体を変更する

使いたいアイコンを以下のように指定します。

.slick-prev::before {
  content: url(../images/icon_prev.png);  
}
.slick-next::before {
   content: url(../images/icon_next.png);
}

※2021年10月8日追記

上の方法でもアイコンを変更することができますが、限定的状況下でarrowsに設定した画像が欠けるという現象が確認されたため、より最善な以下の方法をおすすめします！

slick.jsのオプションの記載の中に、以下のように画像の記述を含めます。

$(".slider").slick({
    prevArrow: '<img src="prev画像" class="slick-arrow prev-arrow">',
    nextArrow: '<img src="next画像" class="slick-arrow next-arrow">'
  });

デフォルトで使われている slick-next ,slick-prev以外のクラス名を付与します。

その上で、cssで調整します。（以下は参考例）

.slick-arrow{
  position: absolute;
  top: 50%;
  margin-top: -16px;
  width: 20px;
  height: 33px;
  opacity:0.7;
  z-index:10;
}
.prev-arrow{
	left: 5px;
}
.next-arrow{
	right: 5px;
}

このようにすると、デフォルトのcssの影響を受けずに、arrowsで使う画像の設定ができます！

こちらのブログの情報を参考にさせていただいています。

slick.jsのdots、arrowsのカスタマイズ方法

スライダーのjQueryプラグインの「slick.js」のdots（ドット）、arrows（矢印）のカスタマイズ方法を紹介します。「slick.js」はdots、arrows変更用のオプションを用意してくれています。

takblog.site

dotsのカスタマイズ

dotsのデフォルト（slick-theme.css)のコードはこちら。

.slick-dots{
  position: absolute;
  bottom: -25px;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}
.slick-dots li{
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}
.slick-dots li button{
  font-size: 0;
  line-height: 0;
  display: block;
  width: 20px;
  height: 20px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus{
  outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before{
  opacity: 1;
}
.slick-dots li button:before{
  font-family: 'slick';
  font-size: 6px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  content: '•';
  text-align: center;
  opacity: .25;
  color: black;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before{
  opacity: .75;
  color: black;
}

dotsのデフォルトアイコンのまま、サイズや位置を変える場合

.slick-dots{
  bottom:-50px;/*上下の位置を変える*/
  right:0;/*左に寄せたいときはleft,右に寄せたいときはright*/
  width:auto;/*width:100％のままだと中央のまま。autoにすると、左右に位置を変更できる*/
}

dotsのアイコン自体をカスタマイズする場合

カスタマイズ例です。

.slick-dots{
  bottom:-50px;
}
.slick-dots li {
  margin: 0 4px; 
  width: 70px;
　height: 5px;
}
.slick-dots li button:before {
  content:'';
  width: 70px;
　height: 5px;
　background: #E0E0E0;
　opacity: 1;
}
.slick-dots li.slick-active button:before{
  background: #F2C802;
}

サンプル例はこちらから。