CODEWITHSUNDEEP
vue.js
yassine j
yassine j

Reputation: 515

Vue-Owl-Carousel not working when using Loop

Vue-Owl-Carousel workign fine using the basic model :

<carousel>
  <img src="https://placeimg.com/200/200/any?1">
  <img src="https://placeimg.com/200/200/any?2">
  <img src="https://placeimg.com/200/200/any?3">
  <img src="https://placeimg.com/200/200/any?4">
</carousel>

But when i use a loop on , the Carousel broke and shows all slides in column.

<carousel> // Not Working
 <img v-for="slide in slides" :src="getslide(slide)">
</carousel>

<carousel> // Not Working
 <template  v-for="slide in slides"><img :src="getslide(slide)"></template>
</carousel>

<carousel> // Not Working, the error is with v-for..
<img v-for="slide in slides" src="/slide.png">
</carousel>

Thank you if you can help.

Upvotes: 0

Views: 4772

Answers (4)

Abd El-Rahman Nabil
Abd El-Rahman Nabil

Reputation: 11

I had the same problem, just check if your slides data is true

try this code :

<carousel v-if="slides">
   <img v-for="slide in slides" :src="slide.png">
</carousel>

Upvotes: 1

imotD
imotD

Reputation: 11

<div v-if="slides.length > 0">
<carousel>
 <img v-for="slide in slides" :src="getslide(slide)">
</carousel>
</div

code worked for me :)

Upvotes: 1

Yagyan Munankarmi
Yagyan Munankarmi

Reputation: 11

Are you using axios to get data to the slides array from the database?. If so the template of vue is being rendered before the data is received in the array causing the carousel not to work. you can re render the vue component and it will work. I had same problem and re-rendering the vue solved it.

Upvotes: 1

Webvi Viet nam
Webvi Viet nam

Reputation: 41

You can try:

<div v-if="slides.length > 0">
<carousel>
 <img v-for="slide in slides" :src="getslide(slide)">
</carousel>
</div

Upvotes: 4

Related Questions