プレミアム会員限定動画

スライダーライブラリSplideで、左右の矢印をカスタマイズする方法

この動画では、JavaScriptの軽量スライダーライブラリSplideの左右矢印（ナビゲーションボタン）のカスタマイズ方法について解説しています。矢印（arrow）のデザインや配置を変更したい場合に役立つ情報を紹介します。

この動画はシリーズになっていて、下記動画リストで他のSplideの動画を視聴することができます。
https://factory-programming-mv.com/playlistDetails/PLv7E5OqNAIPyRciXnWSBjVE4_zEvN4LdQ/


Splideを導入すると、デフォルトで左右の矢印ボタン（ナビゲーションボタン）が自動で表示されます。
HTML側には直接書かれておらず、JavaScript（JS）側で動的に挿入されます。デフォルトの矢印は、親要素.splide__trackの上に配置され、splide__arrowクラスが適用されています。

デフォルトの矢印のスタイルはCSSで変更できます。
例えば、背景色を透明にし、矢印のサイズやホバー時の動きを変更することができます。
Splideでは、デフォルトでSVGアイコンが挿入されていますが、独自の矢印デザインを適用することも可能です。
例えば、beforeやafter疑似要素を使ってCSSだけで矢印を作ることもできます。

矢印のデザインや配置は、プロジェクトのレイアウトに応じて適宜変更してみてください！