Question

我认为boostrap-vue轮播没有那么详细。因此，我无法找到理想的解决方案。

我只想在我的应用程序中显示3个项目（如图像中所示），但我没有找到解决方案，而是搜索了其他包装，但我没有解决方案。

我想做的所有事情

data() {
    return {
      slide: 0,
      sliding: null
    };
  },
  methods: {
    onSlideStart(slide) {
      this.sliding = true;
    },
    onSlideEnd(slide) {
      this.sliding = false;
    }
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div>
  <b-carousel id="carousel-1" v-model="slide" :interval="0" controls indicators background="white" img-width="650" img-height="480" @sliding-start="onSlideStart" @sliding-end="onSlideEnd">
    <b-carousel-slide caption="First slide" text="Nulla vitae elit libero, a pharetra augue mollis interdum." img-src="https://picsum.photos/1024/480/?image=52"></b-carousel-slide>

    <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=54">
      <h1>Hello world!</h1>
    </b-carousel-slide>

    <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=58"></b-carousel-slide>

    <b-carousel-slide>
      <img slot="img" class="d-block img-fluid w-100" width="1024" height="480" src="https://picsum.photos/1024/480/?image=55" alt="image slot">
    </b-carousel-slide>
  </b-carousel>

  <p class="mt-4">
    Slide #: {{ slide }}<br> Sliding: {{ sliding }}
  </p>
</div>

如果您有任何其他图书馆建议，我将不胜感激。

感谢帮助。

Answer 1

我不熟悉此特定组件，但这来自其文档：

      <!-- Slide with blank fluid image to maintain slide aspect ratio -->
      <b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis, tincidunt
          a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum.
        </p>
      </b-carousel-slide>

我将尝试使用空白图像作为默认图像，并插入任何其他想要作为幻灯片子级的图像/内容：

      <!-- Slide with blank fluid image to maintain slide aspect ratio -->
      <b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image">
        <img class="my-img" src="img1.jpg"/>
        <img class="my-img" src="img2.jpg"/>
        <img class="my-img" src="img3.jpg"/>
      </b-carousel-slide>

并使用绝对定位或flexbox以所需的方式显示它们。

Answer 2

BootstrapVue <b-carousel>设计为一次仅显示一张幻灯片（标准的Bootstrap V4.x轮播组件也是如此）。一次最多看不到2张幻灯片（在幻灯片或淡入淡出过渡期间，所有其他幻灯片都被隐藏。CSS转换用于使幻灯片的外观移动）

您需要找到一个支持多张幻灯片显示的第三方组件，或者生成您自己的自定义组件。

Answer 3

我使用 b-card-group 做了同样的事情。因为 b-carousel 不支持显示多个项目。

在模板区域

  <div>

    <!-- carousel area -->
    <b-card-group deck class="mb-0">
        <b-card  v-for="(item,index) in currentPageCards" :key="index" class="mr-0">
            <!-- card content -->
        </b-card>
    </b-card-group>

    <!-- pagination area -->
    <div class="pagination" v-if="cards.length>cardsPerPage">
        <div class="index" v-for="i in pageCount" :key="i" @click="next(i)" :class={active:currentPage(i)}></div>
    </div>
  </div>

在脚本区

 data() {
     return {
         cards: [{
                   //Data in the card as objects
                 },{},{},{},{}],
         paginatedCards:[],
         pageCount:0,
         cardsPerPage:4,
         currentPageIndex:0
     }
 },

 computed: {
    currentPageCards(){
        this.createPages();

        return this.paginatedCards[this.currentPageIndex];
    }
 },

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

    createPages() {
        let cardsLength = this.cards.length;
        let fullPagesCount = Math.floor(cardsLength/this.cardsPerPage);

        if(cardsLength>this.cardsPerPage) {
            this.pageCount = 0;
            for (let i = 0; i < fullPagesCount * this.cardsPerPage; i += this.cardsPerPage) {
                this.paginatedCards[this.pageCount] = this.cards.slice(i,i + this.cardsPerPage);
                this.pageCount++;
            }

            this.paginatedCards[this.pageCount] = this.cards.slice(cardsLength-this.cardsPerPage,cardsLength);
            this.pageCount = this.pageCount+1;
        } else {
            this.paginatedCards[0] = this.cards;
        }
    },

    next(i){
        this.currentPageIndex=i-1;
    }
 }

风格区

.pagination{
    display:flex;
    align-items: center;
    justify-content: center;
    padding:10px;
}

.index{
    margin-left:10px;
    width:10px;
    height:10px;
    background:#000000
}

.active{
    width:15px;
    height:15px;
}

显示如下

试试这个。谢谢！

我们如何通过Bootstrap-Vue Carousel显示多个项目？

3 个答案: