【Vue.js】スライダーのぽちぽちのカラーを変えたい［carouselのpagination］

carouselのpaginationの色を変えたくて 小一時間/ひとぽち くらいは使ったかなと思うのでまとめます。

どこ

この例でいうところの

真ん中の

下のここ！ です。

簡単に変えられそう？ と思ったら、この情報へのたどり着き方がわからなくて「もうこのぽちぽちのこと考えるのやめようかな」って思うところだったり、そうでもなかったりしました。

【参考】vue-carousel v1.0.5

うまくいった例

  pagination-color="#ffffff"
  pagination-active-color="red"

pagination-color はノンアクティブのぽちぽち。
pagination-active-color はアクティブになっているスライドのぽち。
なお、色の書き方はお好みです。

下記のような形でスライド１枚１枚が作成されていて、carousel の後にカスタマイズしたい情報を詰め込めるようになっていますね。他と同様に、このなかで指定します。

<carousel
  :per-page="1"
  :navigation-enabled="true"
  navigation-prev-label="〈"
  navigation-next-label="〉"
  pagination-color="#ffffff" 
  pagination-active-color="red">
  <slide>
    <div class="slide1">１枚目！</div>
  </slide>
  <slide>
    <div class="slide2">2枚目！</div>
  </slide>
  <slide>
    <div class="slide3">3枚目！</div>
  </slide>
</carousel>

以上でちゃんと色がつく、はずです。

うまくいかなかった例

ちなみに、私は最初以下のように書いていて、

paginationColor="#ffffff"
paginationActiveColor="red"

consoleに教えられました。

Prop "paginationcolor" is passed to component <Anonymous>, but the declared prop name is "paginationColor". Note that HTML attributes are case-insensitive and camelCased props need to use their kebab-case equivalents when using in-DOM templates. You should probably use "pagination-color" instead of "paginationColor".

参考

ぽちぽち以外にもできることがはたくさんありますが、なんとしてもぽちぽちを自分色に染めたかったので記事にしました。以下のような感じで、他のカスタマイズもGitHubにまとまっています。

Property	Type	Default	Description
paginationActiveColor	String	#000000	The fill color of the active pagination dot. Any valid CSS color is accepted.
paginationColor	String	#efefef	The fill color of pagination dots. Any valid CSS color is accepted.

【参考】SSENSE/vue-carousel - GitHub

さいごに

この記事が参考になることがあればうれしいです。