【Nuxt】Vue-Carouselの矢印にFontawesomeを使う

需要がないのか検索しても見つからなかったのでメモ程度に。



Vue.jsでカルーセルを実装するには、「vue-carousel」を使うと基本的なコーディングや設定をする必要がなく、非常に便利です。導入に当たってはこちらを参考にしてください。

• 【Vue Carousel】Vueで カルーセルを作る – Silent Lips

またVue.jsでFontawesomeを使うには、「vue-fontawesome」を使うと便利です。導入はこの記事を参考にどうぞ。

• Font awesome を Vue.js で使ってみよう – Qiita

こんな感じの記述で簡単にアイコンを表示することができます。

<font-awesome-icon :icon="['far','play-circle']"/>

ここでやってみたいことが生まれます：

カルーセルの両サイドの矢印を、Fontawesomeの矢印に置き換えたい。

でもこれを実現しようとするとなかなか難しいんですよね。

第1段階：カルーセルのアイコンをbindする

こう書くことで、カルーセルのアイコンを変更することが出来るようになります。

<carousel
 :navigation-next-label="navigationNext"
 :navigation-prev-label="navigationPrev"
>
</carousel>

<script>
import Carousel from 'vue-carousel/src/Carousel.vue'
import Slide from 'vue-carousel/src/Slide.vue'
export default {
 components: {
   Carousel,
   Slide
 },
 computed: {
   navigationNext: function() {
     return '→'
   },
   navigationPrev: function() {
     return '←'
   }
 }
}
</script>

この矢印をアイコンに置き換えてやれば良いです。

第2段階：computedでFontawesomeを返す

テンプレート内ではこんな風に書いていますから、これを入れてみますが、もちろん動きません。

<font-awesome-icon :icon="['far','play-circle']"/>

どうしたもんかと悩みましたが、結局やったことは、vue-fontawesomeによる置き換えは諦めて、この形で表示させることでした。

<i class="far fa-play-circle">

事前に nuxt.config.js で、fontawesome のCSSを読み込んでおきます。

head: {
 link: [
   { rel: "stylesheet", href:"https://use.fontawesome.com/releases/v5.12.0/css/all.css"}
 ],
}

その上で、computed をこう変えるとカルーセルのアイコンがFontawesomeのアイコンに置き換わります。

  computed: {
   navigationNext: function() {
     return '<i class="far fa-play-circle">'
   },
   navigationPrev: function() {
     return '<i class="far fa-play-circle fa-rotate-180">'
   }
 }

fa-rotate-180 というのは180度回転させるという意味です。


ご参考までに！