スライダーの矢印をカスタマイズする
トップページなどのスライダーなどで良く使われるslick slider。今回は、このslick sliderの｢前へ｣、｢次へ｣へ遷移させる際の矢印が、デフォルトでなく、fontawesomeを使ってカスタマイズする方法について記載します。
fontawesomeを使うと、いろんなアイコンに変えられるので覚えておくと便利かと。今回は、fontawesomeの と を使っています。
もちろん、slick slider及び、fontawesomeを使うには、事前にjs/cssを読み込んでおく必要があります。
参考ページ
通常のスライダー
矢印に何もカスタマイズしていないパターン
矢印をカスタマイズしたスライダー
矢印をfontawesomeのアイコンに変更したパターン
該当ソース
矢印の部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | .slick-prev:before{ content: "\f053"; font-family: "Font Awesome 5 Free"; font-weight: 900; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; font-weight: 700; } .slick-next:before{ content: "\f054"; font-family: "Font Awesome 5 Free"; font-weight: 900; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; font-weight: 700; } |
ご参考になれば、幸いです。
WEB DESIGN全てお任せ！ホームページ制作
RishunTradingでは、日本にはないコンセプトや高いデザイン性をもったヨーロッパ製品の輸入販売、及び、Webサイト制作事業などをおこなっております。
「全てお任せ！ホームページ制作」は、ドメイン取得からサーバー設定、レスポンシブルデザイン(スマホ、タブレット対応)、SEO対策がすべて含まれたお得なホームページを制作するサービス商品です。
運用開始後に「Webサイト運用管理サービス(保守)」と組み合わせて購入しますと、メンテナンス、更新も含めてすべて弊社で実施しますので、お客様は安心して本業に集中する事ができます。
しかもなんと、「全てお任せ！ホームページ制作」は、￥100,000！で提供しております。
本業が忙しい中小企業様に大変ご好評を頂いている商品です。
独自ドメイン取得
サーバー開設＆設定
レイアウト設計
レスポンシブルデザイン
(*1)
検索エンジン最適化
(SEO対策)
場所Maps
お問い合わせフォーム
SSL化
各種SNS連携
運用マニュアル
