自定义轮播JSON数据示例

#owl-demo {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}
#owl-demo .item {
    display: block;
    margin: 5px;
}
#owl-demo img {
    display: block;
    width: 100%;
    border: 0 none;
}

<div id="owl-demo" class="owl-carousel">
</div>

{
	"items" : [
		{
			"img": "img/owl1.jpg",
			"alt" : "我是猫头鹰1",
			"link" : "http://www.bootschool.net/"
		},
		{
			"img": "img/owl2.jpg",
			"alt" : "我是猫头鹰2",
			"link" : "http://www.bootschool.net/"
		},
		{
			"img": "img/owl3.jpg",
			"alt" : "我是猫头鹰3",
			"link" : "http://www.bootschool.net/"
		},
		{
			"img": "img/owl4.jpg",
			"alt" : "我是猫头鹰4",
			"link" : "http://www.bootschool.net/"
		},
		{
			"img": "img/owl5.jpg",
			"alt" : "我是猫头鹰5",
			"link" : "http://www.bootschool.net"
		},
		{
			"img": "img/owl6.jpg",
			"alt" : "我是猫头鹰6",
			"link" : "http://www.bootschool.net/"
		},
		{
			"img": "img/owl7.jpg",
			"alt" : "我是猫头鹰7",
			"link" : "http://www.bootschool.net/"
		},
		{
			"img": "img/owl8.jpg",
			"alt" : "我是猫头鹰8",
			"link" : "http://www.bootschool.net/"
		}
	]
}

$(function(){
    $('#owl-demo').owlCarousel({
        items: 4,
        jsonPath: 'json/customData.json',
        jsonSuccess: successLoaded
    });

    function successLoaded(data){
        var content = '';
        for(var i in data['items']){
            var img = data['items'][i].img;
            var alt = data['items'][i].alt;
            var link = data['items'][i].link;
            content += '<a class="item" href="' +link+ '"><img src="' +img+ '" alt="' +alt+ '">';
        }
        $('#owl-demo').html(content);
    }
});