Vue3-carouselで<ol class="carousel__pagination"></ol>が表示されるようにしたい

Question

実現したいこと

vue3-carouselで

<ol class="carousel__pagination"></ol> が表示されるようにしたい その上でstyleをdot（丸）にしたい

前提

Vue3-carousel　https://ismail9k.github.io/vue3-carousel/examples.html
を使ってカルーセル（スライドショー）を作っています

<template #addons>
<navigation />
<pagination />
</template>
と書いているにもかかわらず

<ol class="carousel__pagination"></ol> が表示されません ※<div class="carousel__liveregion carousel__sr-only" aria-live="polite" aria-atomic="true">Item 1 of 4</div> は表示されます

発生している問題・エラーメッセージ

解析を見ましたが、エラーは特にありません

該当のソースコード

  <div id="slider">
    <div class="slider interview_area">
      <carousel :items-to-show="3" :wrap-around="true" :loop="true" :speed="500">
        <template v-for="interview in interviews">
          <slide :key="interview.id">
            <div class="interview_box">
              <img :src="interview.image" alt="">
              <div class="interview_txt">
                <div class="interview_intit">
                  {{ interview.title }}
                </div>
                <div class="interview_intxt">
                  {{ interview.content }}
                </div>
              </div>
            </div>
          </slide>
        </template>
		<template #addons>
      　　　　<navigation />
			<pagination />
				</template>
      </carousel>
    </div>
  </div>

const app = Vue.createApp({
  data() {
    return {
      interviews: [
        {
          id: 1,
          image: "img/img_interview_01.png",
          title: "00代 / 会社員",
          content: "テキストテキスト",
        },
//以下3つインタビュー内容
      ],
      currentSlide: 0,
    };
  },
});

app.component('carousel', VueCarousel.Carousel);
app.component('slide', VueCarousel.Slide);
app.component('navigation', VueCarousel.Navigation);
app.component('pagination', VueCarousel.Pagination);

app.mount('#slider');

試したこと

dot（丸）を別で作成してみたが、スライドショーと連動しない

補足情報（FW/ツールのバージョンなど）

Vue3、Vue3-carousel共に　CDNです
・Vue3

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>

・Vue3-carousel

<link href="https://cdn.jsdelivr.net/npm/vue3-carousel@0.3.1/dist/carousel.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/vue3-carousel@0.3.1/dist/carousel.min.js"></script>

Comments

[FKM]

開発コードを見た感じではolタグはきちんと生成されていますね。ただ、olである以上はcircleは使えませんが。
あと、その書き方だとどこかでスクリプトエラーを吐いていないでしょうか？

Answer 1

まず、CDNで制作しているのがそもそもの問題であり、Vue3のCDNはslotに対応していません。なので、スロット制御しているページャー部分は<div class="carousel__liveregion carousel__sr-only" aria-live="polite" aria-atomic="true">となるみたいです。

CodePen Home
Vue3-Carousel - Wrap Around

ではViteやvue-cliで制作した場合どうなるかですが、今度は確かにolが列記されます。ですがolはstyle-list-typeでcircleは指定できないので、そこは工夫する必要がありそうです。

参考までにデザインをカスタマイズしてる例

vue-carouselでページネーション部分のスタイルを変更する