Search code examples
vue.jsbootstrap-4slidercarousel

Carousel bootstrap with vue js component

currently I'm creatting one component using Carousel With indicators GetBootstrap Carousel With indicators I am implementing this code in one vue component, like:

<template>
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <div v-for="(image, index) in images" :key="index">
                <li data-target="#carouselExampleIndicators" :data-slide-to="index" :class=" index === 0? 'active' : '' "></li>
            </div>
        </ol>
        <div class="carousel-inner">
            <div v-for="(image, index) in images" :key="index">
                <div :class=" index === 0? 'carousel-item active' : 'carousel-item' ">
                    <img class="d-block w-100" :src="image.path" :alt="image.name">
                </div>
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</template>

<script>
    export default {
        props: ["app_route"],
        data() {
            return {
                images: [],
            };
        },
        mounted: function() {
            this.getItemsSlider();
        },
        methods: {
            getItemsSlider() {
                axios
                    .get(this.app_route + "/admin/slider/list", {
                    })
                    .then((response) => {
                        //console.log("response: ", response.data);
                        this.images = response.data;
                    });
            },
        }
    };
</script>

enter image description here

currently the first image is showing but the other images are not showing, the slider is not working too.

Why? what I'm doing wrong?

here is the code codesandbox

Solution

  • According to the documentation, there must be strictly nesting of elements .carousel-inner > .carousel-item.

    You should try this:

    <div class="carousel-inner">
  <div v-for="(image, index) in images" :key="index" :class="index === 0 ? 'carousel-item active' : 'carousel-item'">
      <img class="d-block w-100" :src="image" :alt="image.name" />
  </div>
</div>