zumilogホームCODESwiperの矢印をカスタマイズする方法【CSS・画像別で紹介】2023年3月26日Swiperの矢印ってどうやってカスタマイズしたらいいの?本記事では上記のような疑問を持つ方向けにSwiperの矢印をカスタマイズする方法を解説していきます。Swiperはベンリですが、デフォルトの矢印はダサいのでスタイルを変えたいですよね。今回はCSSで変更する方法と画像で変更する方法の2パターンを紹介します。Swiperのカスタマイズは実務では必須なのでぜひ覚えて帰ってくださいまし!Swiperの基本的な使い方をおさらいしたい人は、下記記事を参照してください。目次Swiperの矢印をカスタマイズする方法CSSで矢印をカスタマイズする矢印を画像に変更するまとめSwiperの矢印をカスタマイズする方法まず、デフォルトの状態から見ていきます。CodePen.デフォルトの矢印は青色です。でかいし見栄えが悪いですね。ソースコード全文は下記です。})</script></html>CSSで矢印をカスタマイズするまずはCSSで矢印をカスタマイズする方法から解説します。下記のような矢印にスタイルを変更してみましょう。CodePen.手順1:矢印の疑似要素を調整するデフォルトのCSSは疑似要素が矢印のスタイルを表しています。この矢印はSwiperのフォント「swiper-icons」で表現されています。一から矢印の形をCSSで作るのは面倒なので、この疑似要素の大きさや色を調整してくのが楽と思います。疑似要素に対して下記のように指定しましょう。14px;}POINT矢印の大きさ→font-sizeで指定する矢印の色→colorで指定する手順2:矢印を囲う円を調整する次に背景の円を描きます。これは矢印の要素に対して直接指定していきます。100%;}POINT疑似要素のサイズよりも幅と高さは大きく設定するようにしましょう。CodePen.というわけでできましたでしょうか!矢印を画像に変更する次に矢印を画像に変更する方法を紹介していきます。下記のような形を作ってみましょう。CodePen.手順はかなり簡単でして、疑似要素にbackground-imageで画像を指定してあげるだけです。疑似要素にすでにあたっているSwiperのスタイルを取り除きましょう。contain;}contentを空にすることでデフォルトの矢印を消すことができます。次に、戻るボタン次へボタンの各画像を指定、要素自体の大きさを指定します。50px;}これだけです。かんたんですね!まとめというわけでSwiperの矢印をカスタマイズする方法を紹介しました。Swiperの矢印はデフォルトではデザインが微妙なので、スタイルを調整してくださいね。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。【Swiper】サムネイルクリックでスライドが切り替わるスライ...サイト管理人づみ元工場勤務のWebディレクター。現在はWeb制作会社に勤めながら兼業でWeb制作事業を営んでいます。工場退職→フリーのWebライターに転身。→コーディング・プログラミングを独学で学ぶ→Web制作会社に入社。兼業でWeb制作事業。