vue.js - 带引导轮播的 Vue JS 如何将图像传递到轮播

Question

我的需求是这样的。

1. 我从后端获得了图像列表。
2. 我想将这些图片名称传递给carousel 以显示图片。

这是我的代码。

<template>
  <div class="">
    <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">

    <div class="carousel-item active" v-for="banner in banners">
      <img :src="`./assets/${banner}`" alt=""  class="img-fluid"   >

    </div>

  </div>
</div>
  </div>
</template>


<script>

export default {
  name: 'app',
  data () {
    return {
      banners:["logo.png","index.png","Capture.png"]
    }
  },
  methods:{

  }
}
</script>

但是这个方法行不通。如何将图像传递到我的carousel 元素？

Answer 1

问题是您将所有轮播幻灯片设置为active，因此它们将同时显示。使用 :class 有条件地设置事件幻灯片...

<div class="carousel-item" v-for="(banner,idx) in banners" :class="{ active: idx==0 }">
      <img :src="banner" alt="" class="img-fluid">
</div>

此外，请确保 :src="'./assets/${banner}'" 引用确实能找到图片。

Working demo on Codeply

注意:您不想要使用 jQuery $('.carousel').carousel(); 加载 Carousel因为您已经在使用 data-ride="carousel" 属性。如前所述 in the Bootstrap 4 docs ...

The data-ride="carousel" attribute is used to mark a carousel as animating starting at page load. It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.