如何在 bootstrap vue 的卡片组组中制作滑块？

Posted 2023-02-22

【中文标题】如何在 bootstrap vue 的卡片组组中制作滑块？

【英文标题】：How can I make slider in the card deck group on the bootstrap vue?

【发布时间】：2019-03-10 03:35:04

【问题描述】：

我使用本教程制作卡片组：https://bootstrap-vue.js.org/docs/components/card/#card-deck-groups

我的脚本是这样的：

<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-
                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>

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

我该怎么做？

【参考方案1】：

<b-carousel> 支持一次只显示一张幻灯片。但是，您可以在幻灯片内放置卡片。每张幻灯片可以放置 1、2 或更多张卡片。

【参考方案2】：

要达到这个结果，您必须使用一些 methods 、 computed 属性和样式，这里是 working example 和 demo：

<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-
                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>

【讨论】：

你为什么不用这样的轮播：bootstrap-vue.js.org/docs/components/carousel？因为它没有显示幻灯片。看起来很正常的分页。没有滑块。我想使用<b-carousel...