owl carousel Dynamic content via JSON - Rafraichissement de la page

Bonjour,
J'utilise owl carousel, mais je rencontre un problème en voulant utiliser un Json pour générer dynamiquement le code HTML des balises img.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
$(document).ready(function(){
    $.ajax({
      url: 'assets/js/owlcarousel/customData.json',
      dataType: 'json',
      success: function(data) {
        var content = '';
        var alt = "test";
        for (i in data.items) {
                content += '<div class="item">'+'<img src='+data.items[i].img+' alt='+alt+'>'+'</div>';
            }
 
         $('.owl-carousel').html(content);
 
         $('.owl-carousel').owlCarousel({
        loop:true,
        dots:true,
        nav:true,
        margin:10,
        autoHeight:true,
        responsiveClass:true,
        responsive:{
            0:{
                items:1
 
            },
            600:{
                items:2
 
            },
            1000:{
                items:3,
                nav:true,
                dots:true
 
            }
        }
 
        });
      }
    });
});

Cela fonctionne bien, néanmoins les images ne s'affichent pas sur la totalité de leur hauteur. Les images s'affiche simplement sur une hauteur de 1px.
Je dois actualiser la page et là tout est ok.
Visiblement il y a un problème asynchrone avec ajax

une suggestion ?

Merci