# 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

### Images

### Custom

### Custom 2

### One Slide

### JSON

### JSON Custom

### Lazy Load

### Auto Height