时间戳

首页 > 解决方案 > 我们如何使用 Bootstrap-Vue Carousel 显示多个项目？

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

问题描述

我认为 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>

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

感谢帮助。

标签： vuejs2carouselbootstrap-vue

解决方案

我不熟悉这个特定的组件，但这是来自它的文档：

      <!-- 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 以您想要的方式显示它们。

推荐阅读