Adding item to owl carousel using javascript break the UI (v2.0.4)

Question

It is rather straight.

I init the carousel with 0-few items, then add items using javascript (I did try with both dummy data and real time data. Call "rebuild" after the loop doesn't help.

    <script>
    $(document).ready(
            function() {
            //  $(".owl-carousel").owlCarousel();
                var owl = $(".owl-carousel");// $("#owl-demo");
                // init carousel
                owl.owlCarousel({
                    items : 3,
                    loop : true,
                    nav : true,
                    navText : [ "<", ">" ]
                });

                for ( i=0; i <100; i++)
                {
                    var content = $("<div class='owl-item'><img src='assets/owl3.jpg' ></div>)");
                    owl.data('owlCarousel').add(content);   
                }
                owl.owlCarousel();

            });
 </script>

The added item (by the loop) just overflown all over the screen.

The first 3 owls are static html, so they are good. Also, if I drag or press next, all the loop-owls will go back to the row nicely.

Answer 1

owl.data('owlCarousel').refresh();

solved the problem...