ブログBlog

スライダーの矢印をカスタマイズする

トップページなどのスライダーなどで良く使われるslick slider。今回は、このslick sliderの「前へ」、「次へ」へ遷移させる際の矢印が、デフォルトでなく、fontawesomeを使ってカスタマイズする方法について記載します。

fontawesomeを使うと、いろんなアイコンに変えられるので覚えておくと便利かと。今回は、fontawesomeの を使っています。

もちろん、slick slider及び、fontawesomeを使うには、事前にjs/cssを読み込んでおく必要があります。

参考ページ

slick slider

fontawesome

通常のスライダー

矢印に何もカスタマイズしていないパターン

  • 1月
  • 2月
  • 3月
  • 4月
  • 5月
  • 6月
  • 7月
  • 8月
  • 9月
  • 10月
  • 11月
  • 12月

矢印をカスタマイズしたスライダー

矢印をfontawesomeのアイコンに変更したパターン

  • 1月
  • 2月
  • 3月
  • 4月
  • 5月
  • 6月
  • 7月
  • 8月
  • 9月
  • 10月
  • 11月
  • 12月

該当ソース

矢印の部分

ご参考になれば、幸いです。

WEB DESIGN

RishunTradingでは、日本にはないコンセプトや高いデザイン性をもったヨーロッパ製品の輸入販売、及び、Webサイト制作事業などをおこなっております。

「全てお任せ!ホームページ制作」は、ドメイン取得からサーバー設定、レスポンシブルデザイン(スマホ、タブレット対応)、SEO対策がすべて含まれたお得なホームページを制作するサービス商品です。

運用開始後に「Webサイト運用管理サービス(保守)」と組み合わせて購入しますと、メンテナンス、更新も含めてすべて弊社で実施しますので、お客様は安心して本業に集中する事ができます。

しかもなんと、「全てお任せ!ホームページ制作」は、¥99,800!で提供しております。

本業が忙しい中小企業様に大変ご好評を頂いている商品です。

  • 独自ドメイン取得

    独自ドメイン取得

  • サーバー開設&設定

    サーバー開設&設定

  • レイアウト設計

    レイアウト設計

  • レスポンシブルデザイン

    レスポンシブルデザイン
    (*1)

  • 検索エンジン最適化(SEO対策)

    検索エンジン最適化
    (SEO対策)

  • 場所Maps

    場所Maps

  • お問い合わせフォーム

    お問い合わせフォーム

  • SSL化

    SSL化

  • 各種SNS連携

    各種SNS連携

  • 運用マニュアル

    運用マニュアル

≫詳細はこちら

MENU