vuejs2 - 我们如何使用 Bootstrap-Vue Carousel 显示多个项目？

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

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

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