带有bootsrap轮播的VueJS如何将图像传递到轮播 [英] VueJS with bootsrap carousel how to pass images to the carousel

问题描述

我的要求是这样的.

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

1. I got the list of images from the back-end.
2. I want to pass those image names to the carousel to display images.

这是我的代码.

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

但是这种方法不起作用.如何将图像传递到我的轮播元素?

But this method doesn't work. How do I pass images to my carousel element?

推荐答案

问题是您将所有轮播幻灯片都设置为active，因此它们都将一次显示.使用:class有条件地设置活动幻灯片...

The problem is that you're setting all carousel slides to active, so they will all display at once. Use :class to conditionally set the active slide...

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

Also, make sure the :src="'./assets/${banner}'" reference is actually working to find the images.

在Codeply上进行演示

注意:您 不要 要使用jQuery $('.carousel').carousel();来加载Carousel，因为您已经在使用data-ride="carousel"属性.如Bootstrap 4文档中 ...

Note: You don't want to use jQuery $('.carousel').carousel(); to load the Carousel since you're already using the data-ride="carousel" attribute. As stated in the Bootstrap 4 docs...

data-ride ="carousel"属性用于将轮播标记为 从页面加载开始动画.不能与 (冗余和不必要)显式的JavaScript初始化 相同的轮播.

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.

这篇关于带有bootsrap轮播的VueJS如何将图像传递到轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！