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"
- }
- ]
- }