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. var img = data["items"][i].img;
  12. var alt = data["items"][i].alt;
  13.  
  14. content += "<img src=\"" +img+ "\" alt=\"" +alt+ "\">"
  15. }
  16. $("#owl-demo").html(content);
  17. }
  18.  
  19. });
  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