<?php
if(isset($list_banner) && !empty($list_banner)):
?>
<div class="collection-banners">
    <div id="owl-collection-banners" class="owl-carousel owl-theme owl-loaded owl-drag">
    <?php 
		foreach($list_banner as $row_bn): 
		?>
			<div class="item">
				<div class="col-banner-item"> <a href="<?=$row_bn->lb_url?>" title="<?=$row_bn->lb_url?>"> <img src="<?=urlimg.'banner/'.$row_bn->lb_image?>" alt="<?=$row_bn->lb_url?>"> </a> </div>
			</div>
		<?php 
		endforeach; 
	?>
        <!--<div class="item">
            <div class="col-banner-item"> <a href="/"> <img src="<?=urlimg?>temp/banners/col_banner_img2.jpg" alt="Collection Banner 2"> </a> </div>
        </div>
        <div class="item">
            <div class="col-banner-item"> <a href="/"> <img src="<?=urlimg?>temp/banners/col_banner_img3.jpg" alt="Collection Banner 3"> </a> </div>
        </div>
        <div class="item">
            <div class="col-banner-item"> <a href="/"> <img src="<?=urlimg?>temp/banners/col_banner_img4.jpg" alt="Collection Banner 4"> </a> </div>
        </div>
        <div class="item">
            <div class="col-banner-item"> <a href="/"> <img src="<?=urlimg?>temp/banners/col_banner_img5.jpg" alt="Collection Banner 5"> </a> </div>
        </div>
        <div class="item">
            <div class="col-banner-item"> <a href="/"> <img src="<?=urlimg?>temp/banners/col_banner_img6.jpg" alt="Collection Banner 6"> </a> </div>
        </div>-->
    </div>
</div>
<link href="<?=skin?>css/owl.carousel.min.css" rel="stylesheet prefetch">
<link href="<?=skin?>css/owl.theme.default.min.css" rel="stylesheet prefetch">
<script src="<?=skin?>js/owl.carousel.min.js"></script>
<script language="javascript">
$('#owl-collection-banners').owlCarousel({
	smartSpeed: 1000,
	nav: false,
	dots: true,
	loop: false,
	autoplay: true,
	autoplayHoverPause: true,
	responsiveRefreshRate : 200,
	navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>', '<i class="fa fa-angle-right" aria-hidden="true"></i>'],
	responsive:{
		0:{
			items:1
		},
		480:{
			items:1
		},
		768:{
			items:1
		},
		1000:{
			items:1
		}
	}
});
</script>
<? endif ;?>