avalon.js中使用owl-carousel轮播图

 

<?php if($banners){?>
<div class="ms-controller" ms-controller="bannerShow">
	<div id="owl-demo" class="page-banner owl-carousel owl-theme">
		<a class="item" ms-for="el in @bannerData">
			<img ms-attr="{src:el.image}" alt="" style="width:100%;height: 382px;" ms-click="toLink(el.link)">
		</a>
	</div>
	<div class="modal fade" id="showTryPic" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="cursor: pointer;">
		<div class="modal-dialog" role="document" style="width: 441px;height:520px;">
			<div class="modal-content" style="width: 441px;height: 520px;">
				<div class="modal-body" style="width:441px;height:520px;box-sizing: border-box;background-color: #f5f5f9;padding:0;border-radius: 5px;position: relative;text-align: center;">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="width:20px;height:20px;display:inline-block;background:url(/image/system/modal-img/cn_img/close.png) no-repeat center center;background-size: contain;position: absolute;right:10px;top:10px;z-index: 1;"
					 onClick="javascript:;">
						<span aria-hidden="true" id="guan"></span>
					</button>

					<div class="tryscan">
						<div id="bannerCode"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	// var bannerlist = <?php echo json_encode($banners); ?>;
	var qrcodeBanner = new QRCode(document.getElementById("bannerCode"), {
		width: 120,
		height: 120
	});
	// setTimeout(function () {

	// }, 1000);
</script>

<script>
	var banner = avalon.define({
		$id: "bannerShow",
		bannerData: <?php echo json_encode($banners); ?>,
		langModalHeader: function () {
			$("#showTryPic").modal("show");
			banner.geturl('https://try.fishqc.com')
		},
		geturl: function (url) {
			banner.str = url;
			qrcodeBanner.makeCode(banner.str);
		},
		toLink: function (item) {
			if (item == "1") {
				banner.langModalHeader()
			} else {
				window.location.href = item
			}

		}
	})
	banner.$watch('onReady', function () {
		if (this.bannerData) {
			$('#owl-demo').owlCarousel({
				items: 1,
				loop: true,
				lazyLoad: true,
				autoplay: true,
				autoplayTimeout: 5000,
				nav: true,
				navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>']
			});
		}
	})
</script>
<style type="text/css">
	.page-banner a.img {
		display: block;
		background-size: auto 100%;
	}

	#bannerCode {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-49%, -48%);
	}
</style>
<?php }?>

　　因为数据还没有出来不能直接调轮播图,所以先判断数据有没有出来先

而且图片的路径里面不能带中文,空格