Question

我的要求是这样的。

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

这是我的代码。

Find /?

但这种方法不起作用。如何将图像传递给 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，因为您已经在使用{{1属性。如上所述in the Bootstrap 4 docs ...

data-ride =＆＃34; carousel＆＃34;属性用于将轮播标记为动画从页面加载开始。它不能与之结合使用（冗余和不必要的）显式JavaScript初始化相同的旋转木马。

Answer 2

来自https://www.w3schools.com/bootstrap/bootstrap_carousel.asp

data-ride =“carousel”属性告诉Bootstrap在页面加载时立即开始动画旋转木马。

Vue尚未在页面加载时安装此组件。因此，只有在安装滑块后才能初始化滑块。

所以你必须删除data-ride="carousel"，并在挂载的钩子中添加$('.carousel').carousel()（假设jquery $可用作全局变量）。有意义吗？

<template>
  <div class="">
    <div id="carouselExampleSlidesOnly" class="carousel slide">
  <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:{

  },
  mounted(){
      $('.carousel').carousel();
  }
}
</script>

VueJS与bootsrap轮播如何将图像传递给旋转木马

2 个答案: