Dynamic content via custom JSON

Setup

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

  1. $(document).ready(function() {
  2.  
  3.   $("#owl-demo").owlCarousel({
  4.     jsonPath : 'json/customData.json',
  5.     jsonSuccess : customDataSuccess
  6.   });
  7.  
  8.   function customDataSuccess(data){
  9.     var content = "";
  10.     for(var i in data["items"]){
  11.        
  12.        var img = data["items"][i].img;
  13.        var alt = data["items"][i].alt;
  14.  
  15.        content += "<img src=\"" +img+ "\" alt=\"" +alt+ "\">"
  16.     }
  17.     $("#owl-demo").html(content);
  18.   }
  19.  
  20. });
  1. <div id="owl-demo" class="owl-carousel">
  2. </div>
  1. #owl-demo .item{
  2.   background: #a1def8;
  3.   padding: 30px 0px;
  4.   display: block;
  5.   margin: 5px;
  6.   color: #FFF;
  7.   -webkit-border-radius: 3px;
  8.   -moz-border-radius: 3px;
  9.   border-radius: 3px;
  10.   text-align: center;
  11. }
  12.  
  1. {
  2.   "items" : [
  3.     {
  4.       "img": "assets/owl1.jpg",
  5.       "alt" : "Owl Image 1"
  6.     },
  7.     {
  8.       "img": "assets/owl2.jpg",
  9.       "alt" : "Owl Image 2"
  10.     },
  11.     {
  12.       "img": "assets/owl3.jpg",
  13.       "alt" : "Owl Image 1"
  14.     },
  15.     {
  16.       "img": "assets/owl4.jpg",
  17.       "alt" : "Owl Image 2"
  18.     },
  19.     {
  20.       "img": "assets/owl5.jpg",
  21.       "alt" : "Owl Image 1"
  22.     },
  23.     {
  24.       "img": "assets/owl6.jpg",
  25.       "alt" : "Owl Image 2"
  26.     }
  27.   ]
  28. }

More Demos

Images

Custom

Custom 2

One Slide

JSON

JSON Custom

Lazy Load

Auto Height