Weblasts

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

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

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

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

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

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

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

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

基準になるサンプル

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

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

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

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

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

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

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

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

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

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

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

矢印の位置調整

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

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

slick-theme.cssの中にこのような記述があります。

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

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

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

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

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

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

矢印の色の調整

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

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

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

矢印の大きさの調整

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

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

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

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

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

矢印ナビを文字にする

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

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

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

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

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

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

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

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

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

矢印を画像に

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

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

PROFILE

フリーランスでweb系のデザイン・コーディング&プログラミングをしています

youtubeはじめました