带有 bootsrap carousel 的 VueJS 如何将图像传递给轮播

Question

我的要求是这样的。

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

这是我的代码。

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

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

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}'"参考实际上正在查找图像。

Codeply 上的工作演示

注意：您不希望使用jQuery $('.carousel').carousel();，因为你已经使用的加载木马data-ride="carousel"的属性。如 Bootstrap 4 文档中所述...

data-ride="carousel" 属性用于在页面加载时将轮播标记为动画。它不能与同一轮播的（冗余和不必要的）显式 JavaScript 初始化结合使用。