Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

VueJS with bootsrap carousel how to pass images to the carousel

My requirement is something like this.

  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.

This is my code.

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

like image 666
Pathum Kalhan Avatar asked Mar 07 '23 13:03

Pathum Kalhan


1 Answers

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>

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

Working demo on Codeply

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

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.

like image 184
Zim Avatar answered Mar 12 '23 16:03

Zim