Estoy agregando vue carousel 3d a mi proyecto. Sin embargo, se necesita espacio para que se muestre el control deslizante, pero no se puede ver el control deslizante allí. Quería inspeccionar y hacer clic con el botón derecho en él, el control deslizante de repente comienza a mostrarse. Cuando actualizo la página, nuevamente desaparece. No sé qué hacer y cuál es el problema con eso. ¿Alguien puede explicar cómo resolver este problema? Gracias.

 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>