CODEWITHSUNDEEP
laravelvue.jsowl-carousel-2
Benjiro
Benjiro

Reputation: 121

vue-owl-carousel not working with dynamic data

I tried this code with manual data and it worked perfectly, now I'm pulling data from the database to the carousel but it just loads all the images unto the page without sliding through them. this is my code 

<carousel :margin="20"
              :autoplay="true"
              :items="3"
              :loop="true"
              :nav="true"
              :navText="[`<span class='fas fa-angle-left text-bold h3'></span>`,`<span class='fas fa- 
               angle-right text-bold h3'></span>`]"
              :dots="false"
    >
        <div v-for="(project, index) in projects" :key="index" :class="index === 0 ? 'active': ''">
            <img :src="project.cover_image" alt="image" >
        </div>


    </carousel>

Upvotes: 3

Views: 1234

Answers (1)

Kamal Pandey
Kamal Pandey

Reputation: 119

You just need to add v-if="projects.length > 0" in your carousel

<carousel v-if="projects.length > 0">
    <div v-for="(project, index) in projects" :key="index">
        <img :src="project.cover_image" alt="image" >
    </div>
</carousel>

Upvotes: 4

Related Questions