Javascript 如何在引导vue上的卡组组中制作滑块？

我使用本教程创建卡片组：

我的剧本是这样的：

<template>
  <div class="animated fadeIn">
    <b-card-group deck v-for="row in formattedClubs">
        <b-card  v-for="club in row"
                img-src="https://placekitten.com/g/300/450"
                img-alt="Img"
                img-top>
            <h4 class="card-title">
                {{club.description}}
            </h4>
            <p class="card-text">
                {{club.price}}
            </p>
            <p class="card-text">
                {{club.country}}
            </p>
            <div slot="footer">
                <b-btn variant="primary" block>Add</b-btn>
            </div>
        </b-card>
    </b-card-group>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      clubs: [
          {id:1, description:'chelsea is the best club in the world and chelsea has a great player', price:1000, country:'england'},
          {id:2, description:'liverpool has salah', price:900, country:'england'},
          {id:3, description:'mu fans', price:800, country:'england'},
          {id:4, description:'city has a great coach. Thas is guardiola', price:700, country:'england'},
          {id:5, description:'arsenal player', price:600, country:'england'},
          {id:6, description:'tottenham in london', price:500, country:'england'},
          {id:7, description:'juventus stadium', price:400, country:'italy'},
          {id:8, description:'madrid sell ronaldo', price:300, country:'spain'},
          {id:9, description:'barcelona in the spain', price:200, country:'spain'},
          {id:10, description:'psg buys neymar at a fantastic price', price:100, country:'france'}
      ]
    }
  },
  computed: {
      formattedClubs() {
          return this.clubs.reduce((c, n, i) => {
              if (i % 4 === 0) c.push([]);
              c[c.length - 1].push(n);
              return c;
          }, []);
      }
  }
}
</script>

{{club.description}}

{{club.price}}


{{俱乐部.国家}

添加
导出默认值{
数据：函数（）{
返回{
俱乐部：[
{id:1，描述：'切尔西是世界上最好的俱乐部，切尔西有一个伟大的球员'，价格：1000，国家：'英格兰'，
{id:2，描述：'liverpool has salah'，价格：900，国家：'england'}，
{id:3，描述：'mu fans'，价格：800，国家：'england'}，
{id:4，描述：'城市有一个伟大的教练。萨斯是瓜迪奥拉'，价格：700，国家：'英格兰'，
{id:5，描述：'arsenal player'，价格：600，国家：'england'}，
{id:6，描述：'tottenham in london'，价格：500，国家：'england'}，
{id:7，描述：'尤文图斯体育场'，价格：400，国家：'意大利'}，
{id:8，描述：'马德里出售罗纳尔多'，价格：300，国家：'西班牙'}，
{id:9，描述：'西班牙的巴塞罗那'，价格：200，国家：'西班牙'}，
{id:10，描述：'psg以惊人的价格收购内马尔'，价格：100，国家：'france'}
]
}
},
计算：{
格式化俱乐部（）{
返回此.clubs.reduce（（c，n，i）=>{
如果（i%4==0）c.push（[]）；
c[c.length-1]。推（n）；
返回c；
}, []);
}
}
}

我想添加滑块。所以我想要这样的滑块：

---

我该怎么做呢？

要实现这一结果，您必须使用一些

方法

，

计算的属性和样式，以下是：


{{club.description}}

{{club.price}}


{{俱乐部.国家}

添加
导出默认值{
数据：函数（）{
返回{
俱乐部：[
{id:1，描述：'切尔西是世界上最好的俱乐部，切尔西有一个伟大的球员'，价格：1000，国家：'英格兰'，
{id:2，描述：'liverpool has salah'，价格：900，国家：'england'}，
{id:3，描述：'mu fans'，价格：800，国家：'england'}，
{id:4，描述：'城市有一个伟大的教练。萨斯是瓜迪奥拉'，价格：700，国家：'英格兰'，
{id:5，描述：'arsenal player'，价格：600，国家：'england'}，
{id:6，描述：'tottenham in london'，价格：500，国家：'england'}，
{id:7，描述：'尤文图斯体育场'，价格：400，国家：'意大利'}，
{id:8，描述：'马德里出售罗纳尔多'，价格：300，国家：'西班牙'}，
{id:9，描述：'西班牙的巴塞罗那'，价格：200，国家：'西班牙'}，
{id:10，描述：'psg以惊人的价格收购内马尔'，价格：100，国家：'france'}
],
分页润滑脂：[]，
nbPages:0，
nbRowPerPage:4，
currentPageIndex:0
}
},
计算：{
格式化俱乐部（）{
返回此.clubs.reduce（（c，n，i）=>{
如果（i%4==0）c.push（[]）；
c[c.length-1]。推（n）；
返回c；
}, []);
},
当前页面俱乐部（）{
这是createPages（）；
返回此.paginatedClubs[此.currentPageIndex]；
}
},
方法：{
第（一）页{
返回i-1==this.currentPageIndex；
},
createPages（）{
让lengthAll=Object.keys（this.clubs）.length；
此值为0.nbPages=0；
for（设i=0；i
支持一次仅显示一张幻灯片。但是，您可以将卡片放在幻灯片中。每张幻灯片可以放置1张、2张或更多卡片。
为什么不使用如下旋转木马：？因为它不显示幻灯片。这似乎是正常的分页。没有滑块。我想使用

<template>
  <div class="animated fadeIn ">
    <b-card-group  deck >
        <b-card  v-for="(club,index) in currentPageClubs" :key="index"
                img-src="https://placekitten.com/g/300/300"
                img-alt="Img"
                img-top >
            <h4 class="card-title">
                {{club.description}}
            </h4>
            <p class="card-text">
                {{club.price}}
            </p>
            <p class="card-text">
                {{club.country}}
            </p>
            <div slot="footer">
                <b-btn variant="primary" block>Add</b-btn>
            </div>
        </b-card>
    </b-card-group>

    <div class="card-pagination">
        <div class="page-index" v-for="i in nbPages" :key="i"  @click="goto(i)" :class={active:currentPage(i)}></div>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      clubs: [
          {id:1, description:'chelsea is the best club in the world and chelsea has a great player', price:1000, country:'england'},
          {id:2, description:'liverpool has salah', price:900, country:'england'},
          {id:3, description:'mu fans', price:800, country:'england'},
          {id:4, description:'city has a great coach. Thas is guardiola', price:700, country:'england'},
          {id:5, description:'arsenal player', price:600, country:'england'},
          {id:6, description:'tottenham in london', price:500, country:'england'},
          {id:7, description:'juventus stadium', price:400, country:'italy'},
          {id:8, description:'madrid sell ronaldo', price:300, country:'spain'},
          {id:9, description:'barcelona in the spain', price:200, country:'spain'},
          {id:10, description:'psg buys neymar at a fantastic price', price:100, country:'france'}
      ],
      paginatedClubs:[],
      nbPages:0,
      nbRowPerPage:4,
      currentPageIndex:0
    }
  },
  computed: {
      formattedClubs() {
          return this.clubs.reduce((c, n, i) => {
              if (i % 4 === 0) c.push([]);
              c[c.length - 1].push(n);
              return c;
          }, []);
      },
      currentPageClubs(){
         this.createPages();

        return this.paginatedClubs[this.currentPageIndex];
      }
  },
  methods:{
    currentPage(i){
        return i-1===this.currentPageIndex;
    },
      createPages() {

      let lengthAll = Object.keys(this.clubs).length;
      this.nbPages = 0;
       for (let i = 0; i < lengthAll; i = i + this.nbRowPerPage) {
        this.paginatedClubs[this.nbPages] = this.clubs.slice(
          i,
          i + this.nbRowPerPage
        );
        this.nbPages++;
      }
    },
    goto(i){

      this.currentPageIndex=i-1;
    }
  }
}
</script>
<style>
.card-pagination{
  display:flex;
  align-items: center;
  justify-content: center;
  padding:20px;
}
.page-index{
  margin-left:10px;
  width:15px;
  height:15px;
  border-radius:15px;
  background:#007bff
}
.active{
   width:20px;
  height:20px;
  border-radius:20px;
}
</style>