I am adding vue carousel 3d into my project. However it takes space for slider to display but cannot see slider there. I wanted to inspect and right click on it , the slider suddenly stars showing. When I refresh the page, again it disappears. I don't know what to do and whats the problem with that. Can anyone please explain how to solve this issue? Thanks.

App.vue

<template>
  <div id="app" class="wrapper">
    <div class="box">
      <!-- <h3>Controls visible</h3> -->

      <carousel-3d :controls-visible="true">
        <slide v-for="(slide, i) in slides" :index="i" :key="i">
          <img :src="slide.src">

        </slide>
        <!-- <slide :index="0" :key="0"><p>a</p></slide>
        <slide :index="1" :key="1"><p>b</p></slide>
        <slide :index="2" :key="2"><p>c</p></slide> -->
        <!-- <slide :index="3"><p>a</p></slide> -->
      </carousel-3d>
    </div>
  </div>
</template>
<script>
import Carousel3d from "./Carousel3d.vue";
import Slide from "./Slide.vue";

const slides = [
  {
    title: 'Slide 1',
    desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, maxime.',
    src: 'https://placehold.it/360x270'
  },
  {
    title: 'Slide 2',
    desc: 'Lorem ipsum dolor sit amet ',
    src: 'https://placehold.it/360x270'
  },
  {
    title: 'Slide 3',
    desc: 'abcd ',
    src: 'https://placehold.it/360x270'
  },
]

export default {
  name: 'App',
  components: {
    Carousel3d,
    Slide
  },
  data () {
    return {
      slides: slides,
      slideCount: 3
    }
  },
 }
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>