Carousel displays arrows or one slide only until i inspect element in Google then shows fine

[kinger251285]

Hi

I have just installed the carousel as per the docs and trying to display images (using a combination of vuetify v-img).

However on the homepage the carousel does not load correctly, the arrows show and the space is taken up that should be by the carousel, sometimes one slide appears only. However when i right click and inspect element it all shows correctly and works as it should do. No idea why this bug is happening.

I am also using the carousel elsewhere in a different route exactly the same implementation but not having the same issue (works fine).

app.js

importCarousel3d from 'vue-carousel-3d';

window.axios = axios;

Vue.use(VueRouter)
Vue.use(require('vue-moment'));
Vue.use(VueMeta, {
  refreshOnceOnNavigation: true
});


Vue.use(Carousel3d);

Homepage.vue

<carousel-3d 
              :autoplay="true" 
              :autoplay-timeout="5000" 
              :display="5" 
              :perspective="0" 
              :space="400"
              :width="450" 
              :height="450"
              :controls-visible="true"
              :border="0"
            >
                <slide v-for="(product, i) in products" :index="i">
                    
                        <v-img eager :src="product.image"></v-img>
                    
                </slide>
   </carousel-3d>

[kinger251285]

Seems to work fine upon a window resizing which is what is happening when i click the inspect element

[kinger251285]

Seems i needed to add a count prop.

:count="products.length"

One slide (left is still missing but working better), code fixed ish as below:

<carousel-3d 
              :autoplay="true" 
              :autoplay-timeout="1000" 
              :display="5" 
              :perspective="0" 
              :space="400"
              :width="450" 
              :height="450"
              :controls-visible="true"
              :border="0"
              :count="products.length"              
            >
                <slide v-for="(product, i) in products" :index="i" :key="i">
                    
                        <v-img eager :src="product.image"></v-img>
                    
                </slide>
            </carousel-3d> 

[SpeightPLab]

Did you get any further with that issue? I'm facing the same thing

[OsmarICancino]

The comment of @kinger251285 helped to start the carousel behavior but I think that the initial behavior is incorrect because an element is still missing. Using autoplay works better.

I hope you can fix this behavior, ¡it is a great library!

[SpeightPLab]

Few cheeky JS hacks and i got there! Cheers!

[mhjb]

@SpeightPLab @OsmarICancino I'm also having the missing initial slide problem. Any clues on how you resolved it?