Image from ajax request doesn't show up on carousel
<p>Hi I seem to stumble with my code, I have an ajax request from a php file which gets its' thumbnail_url that is fetching from an api.
My problem is in my js and carousel. What I want to achieve is that I want to append the pulled images from ajax to owl carousel. </p>

<pre><code>&lt;title&gt;Ajax Preview&lt;/title&gt;
&lt;script src="https://code.jquery.com/jquery-3.1.0.js"&gt;&lt;/script&gt;
&lt;script src="https://syncslider-ehnoxx07.c9users.io/Working_imgs_ajax/main.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="https://syncslider-ehnoxx07.c9users.io/With_slick/owl-carousel.css" type="text/css" /&gt;
&lt;link rel="stylesheet" href="https://syncslider-ehnoxx07.c9users.io/With_slick/owl-theme.css" type="text/css" /&gt;
&lt;script type="text/javascript" src="https://syncslider-ehnoxx07.c9users.io/With_slick/owl-carousel.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="https://syncslider-ehnoxx07.c9users.io/With_slick/owl-min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="https://syncslider-ehnoxx07.c9users.io/With_slick/carousel.js"&gt;&lt;/script&gt;

  &lt;style&gt;
  #owl-demo .item{
  background: #a1def8;
  padding: 30px 0px;
  display: block;
  margin: 5px;
  color: #FFF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
}
.prevImg{
    visibility:visible !important;
    display:block !important; 
}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div id="owl-example" class="owl-carousel"&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>My ajax</p>

<pre><code> $(function() {
        var $data = $('#owl-example');
        $.ajax({
         type:'GET',
         dataType:'json',
         url:'https://syncslider-ehnoxx07.c9users.io/Working_imgs_ajax/preview-template.php',
         success: function (data) {
          //pull data object to get thumbnail_urls.
          for(var i=0 ; i&lt;data.length ; i++){
            console.log(data);
          $data.append('&lt;div class="item"&gt;&lt;img class="prevImg" src=' + data[i].thumbnail_url + '&gt;&lt;/div&gt;');
         }
         }
     });
    }); 
</code></pre>