slickの矢印ナビをカスタマイズ方法を紹介しようと思う

JavaScript2021.05.07

slickは便利だけれども、進む・戻るの矢印ナビは初めて使う人にはわかりにくいハマリポイントだと思います。

そのまま使うとスライダー外部に出てくるので横にはみ出たり大変。

slickには独自の矢印ナビを作りやすくするオプションが用意されているので、そちらを使った方法と、デフォルトのまま操作する方法を紹介していきます。

CDNを使わない状態での対策例ですが、CDNを使っていてもだいたい同じ方法で行けると思います

『slick』の基本的な使い方（オプションなど）を細かくまとめていく

以前紹介した“『slick』を使った無限ループスライダーの作り方と注意点“の記事が結構人気みたいなので、改めてjQueryのプラグイン『sl・・・。

『slick』のイベントをサンプル付きで細かくまとめました

以前の記事でオプションを大量に紹介したのでこちらの記事ではイベントを紹介していきます。簡単なサンプル付きにしていきますので少し重いかもしれ・・・。

『slick』のメソッドをすべてサンプル付きでまとめてみました

slickのメソッドをすべてサンプル付きで紹介しています。全て動くようになっているので重いかもしれませんがよろしくお願いします。この記事・・・。

この記事の目次

デフォルトのslickの矢印ナビを調整する方法
デフォルトのものを変更する

デフォルトのslickの矢印ナビを調整する方法

slickの矢印ナビはオプションで特別な記述なし使えるの、初期化するだけで表示されています。

まずは基準になるサンプルから

<div class="slider">
  <div class="slide slide1">①</div>
  <div class="slide slide2">②</div>
  <div class="slide slide3">③</div>
</div>

</div>

.slider {
  width: calc(100% - 40px);
  margin: 0 auto;
}

.slide {
  font-size: 42px;
  font-weight: bold;
  text-align: center;
  line-height: 300px;
}

.slide1 {
  background-color: #b6ddff;
}

.slide2 {
  background-color: #b6ffbe;
}

.slide3 {
  background-color: #ffb6e3;
}

.slider {

width: calc(100% - 40px);

margin: 0 auto;

}

.slide {

font-size: 42px;

font-weight: bold;

text-align: center;

line-height: 300px;

}

.slide1 {

background-color: #b6ddff;

}

.slide2 {

background-color: #b6ffbe;

}

.slide3 {

background-color: #ffb6e3;

}

$(function() {
  $('.slider').slick();
});

$(function() {

$('.slider').slick();

});

基準になるサンプル

見えないけど実は矢印ナビは出現している

①

②

③

前のスライドへ送る矢印ナビにはbutton要素にクラス「slick-prev」が付与された状態で、次のスライドへ送る矢印ナビにはbutton要素にクラス「slick-next」が付与された状態で出力されてきます。

この矢印ナビの厄介なところがいくつかあって、使い慣れていない人は気がつかないでハマることも多いかと思います。

厄介な点は以下のとおりです

スライダー外部に配置されるので、スライダー本体からはみ出す
アイコンフォントの色が白なので、背景色が白だと、背景に馴染んで見えない
アイコンフォントのファイルを用意できていないとエラーが出る

slick-theme.cssの中に以下のような、矢印ナビを調整するための記述があります。

こちらを上書きするようにcssを操作していけばデフォルトの矢印はカスタマイズ可能です

.slick-prev, .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}

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

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

.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;
}

.slick-prev:before {
    content: '←';
}

.slick-next:before {
    content: '→';
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
    color: transparent;
    outline: none;
    background: transparent;
}

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
    opacity: 1;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
    opacity: .25;
}

.slick-prev, .slick-next {

font-size: 0;

line-height: 0;

position: absolute;

top: 50%;

display: block;

width: 20px;

height: 20px;

padding: 0;

-webkit-transform: translate(0, -50%);

-ms-transform: translate(0, -50%);

transform: translate(0, -50%);

cursor: pointer;

color: transparent;

border: none;

outline: none;

background: transparent;

}

.slick-prev {

left: -25px;

}

.slick-next {

right: -25px;

}

.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;

}

.slick-prev:before {

content: '←';

}

.slick-next:before {

content: '→';

}

.slick-prev:hover,

.slick-prev:focus,

.slick-next:hover,

.slick-next:focus {

color: transparent;

outline: none;

background: transparent;

}

.slick-prev:hover:before,

.slick-prev:focus:before,

.slick-next:hover:before,

.slick-next:focus:before {

opacity: 1;

}

.slick-prev.slick-disabled:before,

.slick-next.slick-disabled:before {

opacity: .25;

}

矢印ナビの位置を調整する

前述の通り、矢印ナビはデフォルトの状態だと、スライダーの外側に配置されています。

スライダーの中に収めるのであれば、上記のような記述にしてあげるだけで大丈夫です。

「z-index」プロパティも調整しないと、下に潜り込んでしまうので忘れずに調整しましょう

.slick-prev {
    left: 0;
    z-index: 1;
}

.slick-next {
    right: 0;
}

.slick-prev {

left: 0;

z-index: 1;

}

.slick-next {

right: 0;

}

矢印の位置調整

①

②

③

アイコンフォントを調整する

アイコンフォントはそのまま使いたいけれど、色を変えたいとか、大きさを変えたいとかする場合はcssを上書きする形を取るといいでしょう。

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;
}

.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;

}

この部分を直接操作する方法でもいいとは思いますが、プラグインのcssを操作するのはいかがなものかと思うので、自分で作ってるcssファイルの方に上書きする設定をして対処しましょう。

上書きして対処する場合は、セレクタは同じにして、slick-theme.cssよりもあとに読み込まれるようにしましょう

矢印の色を変更したいとき

アイコンフォントなので「color」プロパティを操作すれば変更できます。

ついでに不透明度も少し落とされているので、「opacity」プロパティも調整すると好みの色に変更ができます。

デフォルトは「white」です。

.slick-prev:before, .slick-next:before {
    color: #000;/*黒にする*/
    opacity: 1;/*デフォルトは.75が指定されている*/
}

.slick-prev:before, .slick-next:before {

color: #000;/*黒にする*/

opacity: 1;/*デフォルトは.75が指定されている*/

}

矢印の色の調整

①

②

③

矢印のサイズを変更したいとき

アイコンフォントなので「font-size」プロパティを操作すれば変更できますが、「.slick-prev」と「 .slick-next」に幅と高さの設定がされていますのでこちらの数値も同時に調整する必要があります。

デフォルトはどれも「20px」なのでこちらを基準に調整するといいでしょう

.slick-prev,.slick-next{
    width: 40px;
    height: 40px;
}

.slick-prev:before, .slick-next:before {
    font-size: 40px;/*少し大きくする*/
}

.slick-prev,.slick-next{

width: 40px;

height: 40px;

}

.slick-prev:before, .slick-next:before {

font-size: 40px;/*少し大きくする*/

}

矢印の大きさの調整

①

②

③

アイコンフォントではなく好きな文字を表示する

任意の文字に変えたい場合は各button要素のbefore疑似要素を操作していきます。

背景色を付けたい場合は、各button要素に直接指定すれば問題ありません。

ただ、hover・focusに対して背景を透明にする指定がくっついているので、こちらも任意の背景色の指定をしておくと、背景色が消えることなく表示できます。

調整する箇所が多いので、人によっては後述するオプションを使って任意の要素を使う方が楽に感じるかもしれません

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  background-color: #434343;/*デフォルトがtransparentなので消えないように*/
}

/*表示する文字周りの設定*/
.slick-prev:before {
  content:'PREV';
  color: #fff;
  opacity: 1;
  font-size: 14px;
}
.slick-next:before {
  content:'NEXT';
  color: #fff;
  opacity: 1;
  font-size: 14px;
}

/*背景や位置の調整*/
.slick-prev {
  left: 0;
  z-index: 1;
  width: auto;
  height: auto;
  padding: 10px;
  color: #fff;
  background-color: #000;
  transition:.4s;
}

.slick-next {
  right: 0;
  width: auto;
  height: auto;
  padding: 10px;
  background-color: #000;
  transition:.4s;
}

.slick-prev:hover,

.slick-prev:focus,

.slick-next:hover,

.slick-next:focus {

background-color: #434343;/*デフォルトがtransparentなので消えないように*/

}

/*表示する文字周りの設定*/

.slick-prev:before {

content:'PREV';

color: #fff;

opacity: 1;

font-size: 14px;

}

.slick-next:before {

content:'NEXT';

color: #fff;

opacity: 1;

font-size: 14px;

}

/*背景や位置の調整*/

.slick-prev {

left: 0;

z-index: 1;

width: auto;

height: auto;

padding: 10px;

color: #fff;

background-color: #000;

transition:.4s;

}

.slick-next {

right: 0;

width: auto;

height: auto;

padding: 10px;

background-color: #000;

transition:.4s;

}

矢印ナビを文字にする

①

②

③

infiniteをfalseにしてループさせないとき

オプションの「infinite」を「false」とするとスライダーがループしなくなります。

「infinite」を「false」と設定しした場合、slickではこれ以上進めない場合にボタンにクラス「slick-disabled」が付与されるのでこちらを調整すれば、これ以上進めないことを視覚的に伝えることが可能になります。

デフォルトでbutton要素のbefore疑似要素に対して、「opacity: .25;」が指定されていますすので、こちらとひつようであれば各button要素を調整するといいでしょう

/*前述したものと同じ*/
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  background-color: #434343;
}

.slick-prev:before {
  content:'PREV';
  color: #fff;
  opacity: 1;
  font-size: 14px;
}
.slick-next:before {
  content:'NEXT';
  color: #fff;
  opacity: 1;
  font-size: 14px;
}

.slick-prev {
  left: 0;
  z-index: 1;
  width: auto;
  height: auto;
  padding: 10px;
  color: #fff;
  background-color: #000;
  transition:.4s;
}

.slick-next {
  right: 0;
  width: auto;
  height: auto;
  padding: 10px;
  background-color: #000;
  transition:.4s;
}

/*ここからループさせないときの指定例*/
.slick-prev.slick-disabled,
.slick-next.slick-disabled {
    opacity: .3;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
    opacity: 1;
}

/*前述したものと同じ*/

.slick-prev:hover,

.slick-prev:focus,

.slick-next:hover,

.slick-next:focus {

background-color: #434343;

}

.slick-prev:before {

content:'PREV';

color: #fff;

opacity: 1;

font-size: 14px;

}

.slick-next:before {

content:'NEXT';

color: #fff;

opacity: 1;

font-size: 14px;

}

.slick-prev {

left: 0;

z-index: 1;

width: auto;

height: auto;

padding: 10px;

color: #fff;

background-color: #000;

transition:.4s;

}

.slick-next {

right: 0;

width: auto;

height: auto;

padding: 10px;

background-color: #000;

transition:.4s;

}

/*ここからループさせないときの指定例*/

.slick-prev.slick-disabled,

.slick-next.slick-disabled {

opacity: .3;

}

.slick-prev.slick-disabled:before,

.slick-next.slick-disabled:before {

opacity: 1;

}

ループさせないときの矢印ナビを調整する

①

②

③

デフォルトのものを変更する

矢印として表示したいものを変更したい場合は、cssで無理やり調整するよりもオプションを利用して別の要素を使うと手っ取り早いと思います。

オプションの「prevArrow」と「nextArrow」は、ボタンとして表示する要素を指定することができます

『slick』の基本的な使い方（オプションなど）を細かくまとめていく

以前紹介した“『slick』を使った無限ループスライダーの作り方と注意点“の記事が結構人気みたいなので、改めてjQueryのプラグイン『sl・・・。

オプションの記事で書いたものと重複してしまいますが、画像に変えてみます。

$(function(){
  $('.slider').slick({
    prevArrow:'<img src="yubi-left.svg" alt="" class="prev_icon">',
    nextArrow:'<img src="yubi-right.svg" alt="" class="next_icon">'
  });
});

$(function(){

$('.slider').slick({

prevArrow:'<img src="yubi-left.svg" alt="" class="prev_icon">',

nextArrow:'<img src="yubi-right.svg" alt="" class="next_icon">'

});

.prev_icon{
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translate(0,-50%);
  width: 30px;
  z-index: 1;
}
.next_icon{
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translate(0,-50%);
  width: 30px;
  z-index: 1;
}

.prev_icon{

position: absolute;

top: 50%;

left: 10px;

transform: translate(0,-50%);

width: 30px;

z-index: 1;

}

.next_icon{

position: absolute;

top: 50%;

right: 10px;

transform: translate(0,-50%);

width: 30px;

z-index: 1;

}

矢印を画像に

①

②

③

画像以外ももちろん対応可能ですが、記号を変えるだけとかであればデフォルトをいじっていくほうが簡単かもしれません。

以上、矢印の調整だけに絞ったカスタマイズでした。

slickの矢印ナビをカスタマイズ方法を紹介しようと思う

デフォルトのslickの矢印ナビを調整する方法

矢印ナビの位置を調整する

アイコンフォントを調整する

矢印の色を変更したいとき

矢印のサイズを変更したいとき

アイコンフォントではなく好きな文字を表示する

infiniteをfalseにしてループさせないとき

デフォルトのものを変更する

『slick』の基本的な使い方（オプションなど）を細かくまとめていく

CSSだけでスライドショー

swiper.js（8.1.4）を使ってゆっくり等速で流れる無限ループスライダーを作ってみました

IEにはそろそろ別れを告げたいのでIEのユーザーだけリダイレクトしてみた

最近よく使うcssを使ったアンダーラインが出た後に文字がニョキッと出てくるアニメーション