1 year ago

#382365

test-img

Michel Gisenaël

owl carousel add dynamically another item with vue js

In my vue component i have a data array that contain a list of image; so i render these image with v-for

<div class="body-details-img-gall GalleryImgSlide" id="slideup">
    <img :data-hash="'slide-' + item.id" :src="asset + 'image/message/chat/' + id + '/' + item.filename" class="d-block w-100" alt="" v-for="(item, i) in (pictures)" :key="'slideup-' + item.id">
</div>

so in my mounted i initialise the owl carousel

 $(document).ready(function(){
    $(".GalleryImgSlide").owlCarousel(
       {
           items:1,
           smartSpeed:450,
           nav: true,
           mouseDrag: false,
           URLhashListener:true,
           startPosition: 'URLHash',
       }
    );
 }.bind(this))

my carousel work fine; now i want to push another picture inside the data pictures; but it's not considered by the actual carousel;

Is there a way to re-render the carousel after pushing data or is it possible to add the item dynamically on the caroussel?

vue.js

owl-carousel

0 Answers

Your Answer

Accepted video resources