Dynamic content via custom JSON

Setup

This example uses custom structure of JSON file customData.json.

$(document).ready(function() {

  $("#owl-demo").owlCarousel({
    jsonPath : 'json/customData.json',
    jsonSuccess : customDataSuccess
  });

  function customDataSuccess(data){
    var content = "";
    for(var i in data["items"]){
       
       var img = data["items"][i].img;
       var alt = data["items"][i].alt;

       content += "<img src=\"" +img+ "\" alt=\"" +alt+ "\">"
    }
    $("#owl-demo").html(content);
  }

});
<div id="owl-demo" class="owl-carousel">
</div>
#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;
}

{
  "items" : [
    {
      "img": "assets/owl1.jpg",
      "alt" : "Owl Image 1"
    },
    {
      "img": "assets/owl2.jpg",
      "alt" : "Owl Image 2"
    },
    {
      "img": "assets/owl3.jpg",
      "alt" : "Owl Image 1"
    },
    {
      "img": "assets/owl4.jpg",
      "alt" : "Owl Image 2"
    },
    {
      "img": "assets/owl5.jpg",
      "alt" : "Owl Image 1"
    },
    {
      "img": "assets/owl6.jpg",
      "alt" : "Owl Image 2"
    }
  ]
}

More Demos