CSS Carousel Not Working in Gridsome App?

Question

I am currently trying to style my Gridsome App with Buefy CSS Framework.Everything else is working fine(buttons,cards etc) except for the Carousel.Specifically the <b-carousel> tag.

Here is the Code

<template>
  <DefaultLayout>

<template>
    <b-carousel :indicator-inside="false">
        <b-carousel-item v-for="(item, i) in 6" :key="i">
            <span class="image">
              <img :src="getImgUrl(i)">
            </span>
        </b-carousel-item>
        <template slot="indicators" slot-scope="props">
            <span class="al image">
                <img :src="getImgUrl(props.i)" :title="props.i">
            </span>
        </template>
    </b-carousel>
</template>
</DefaultLayout>
</template>

<script>
export default {
  methods: {
      getImgUrl(value) {
          return `https://picsum.photos/id/43${value}/1230/500`
      }
  }
}
</script>

Please Help

@Ishu There is no error in the Console.The images are not displaying — Codza.M, Jan 20 '20 at 14:42
have you checked different corners like, is image link is generated & assigned to markup correctly? inspect elements whether container is visible or not. — Ishu, Jan 21 '20 at 08:37

score 0 · Answer 1 · answered Jan 24 '20 at 08:09

0

Silly Me.My Buefy Version was the problem.l was v0.8.9 and l updated to v0.8.10

answered Jan 24 '20 at 08:09

Codza.M

1
1

CSS Carousel Not Working in Gridsome App?

1 Answers1